DIVは別の部門と重複しています

私のサイトには3つのセクションがありますが、別のセクション4を作成するとセクション3と重なっています。コードを確認してくださいセクション4のセクションを表示したい3ベストを尽くしましたが、何も起こりません。DIVは別の部門と重複しています

CSS

*{ 
    margin: 0; 
    padding: 0; 
} 

header{ 
    position: fixed; 
    z-index: 777; 
} 

/* Top Menu Start Here */ 

.top_nav{ 
    height: 90px; 
    width: 100%; 
    background: rgba(0,0,0,.5); 
    position: fixed; 
    z-index: 1; 
    transition:all 0.7s ease; 
    -webkit-transition:all 0.7s ease; 
    -moz-transition:all 0.7s ease; 
    -o-transition:all 0.7s ease; 
    -ms-transition:all 0.7s ease; 
} 

.container{ 
    height: 100vh; 
    width: 100%; 
    max-width: 100%; 
    background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig"); 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    top: 0; 
} 

.site-dt{ 
    background-color: #fff; 
    height: 573px; 
    width: 100%; 
} 


#slider-main{ 
    height: 578px; 
    width: 100%; 
    overflow: hidden; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

#slider-main #slider img{ 
    height: 100%; 
    width: 100%; 
} 

.section3{ 
    height: 573px; 
    width: 100%; 
    background-color: #de5670; 
    overflow: hidden; 
    position: absolute; 
} 

.section4{ 
    height: 573px; 
    width: 100%; 
    background-color: #de5312; 
    overflow: hidden; 
    position: absolute; 
}

HTML

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<Script type ="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script type="text/javascript" src="http://malsup.github.io/min/jquery.cycle2.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
</head> 
<header> 
    <div class="top_nav"> 
    </div> 
</header> 
<div class="container"> 
</div> 
<div id="slider-main"> 
<div id="slider" class="cycle-slideshow" 
    data-cycle-fx=scrollHorz 
    data-cycle-timeout=2000 
    > 
    <div class="cycle-pager"> 

    </div> 
<img src="http://malsup.github.io/images/p1.jpg"> 
    <img src="http://malsup.github.io/images/p2.jpg"> 
    <img src="http://malsup.github.io/images/p3.jpg"> 
    <img src="http://malsup.github.io/images/p4.jpg"> 
</div> 
</div> 
<div class="section3"> 

</div> 
<div class="section4"> 

</div> 
</html>

出典

2016-10-17 Rabner Casandara

。

.site-dt{ 
 
    background-color: #fff; 
 
    height: 573px; 
 
    width: 100%; 
 
} 
 

 

 
#slider-main{ 
 
    height: 578px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
#slider-main #slider img{ 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.section3{ 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: #de5670; 
 
    overflow: hidden; 
 

 
} 
 
.section3 p{ 
 
background-color:white; 
 

 
} 
 

 
.section4 p{ 
 
background-color:white; 
 

 
} 
 

 
.section4{ 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: #de5312; 
 
    overflow: hidden; 
 
    
 
\t background-color:blue; 
 
\t }

<body> 
 
<div class="container"> 
 
</div> 
 
<div id="slider-main"> 
 
<div id="slider" class="cycle-slideshow" 
 
    data-cycle-fx=scrollHorz 
 
    data-cycle-timeout=2000 
 
    > 
 
    <div class="cycle-pager"> 
 

 
    </div> 
 
<img src="http://malsup.github.io/images/p1.jpg"> 
 
    <img src="http://malsup.github.io/images/p2.jpg"> 
 
    <img src="http://malsup.github.io/images/p3.jpg"> 
 
    <img src="http://malsup.github.io/images/p4.jpg"> 
 
</div> 
 
</div> 
 
<div class="section3"> 
 
<p>Section 3</p> 
 
</div> 
 
<div class="section4"> 
 
<p>section4</p> 
 
</div> 
 
    </body>

出典

2016-10-17 04:39:07

正確にあなたが達成しようとしているが、あなただけのCSSの位置を削除することはできませんかわからない：絶対セクション3とセクション4？絶対位置は

出典

2016-10-17 04:29:15 ynter

を重ね、それらを作っているあなたのCSSコード

.section3と .section4から position: absolute;を削除します。それはそれは助けsection4 .Hopeで重ねたされている理由だけで、SECTION3からsection4のthatsを position: absolute;を削除

*{ 
    margin: 0; 
    padding: 0; 
} 

header{ 
    position: fixed; 
    z-index: 777; 
} 

/* Top Menu Start Here */ 

.top_nav{ 
    height: 90px; 
    width: 100%; 
    background: rgba(0,0,0,.5); 
    position: fixed; 
    z-index: 1; 
    transition:all 0.7s ease; 
    -webkit-transition:all 0.7s ease; 
    -moz-transition:all 0.7s ease; 
    -o-transition:all 0.7s ease; 
    -ms-transition:all 0.7s ease; 
} 

.container{ 
    height: 100vh; 
    width: 100%; 
    max-width: 100%; 
    background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig"); 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    top: 0; 
} 

.site-dt{ 
    background-color: #fff; 
    height: 573px; 
    width: 100%; 
} 


#slider-main{ 
    height: 578px; 
    width: 100%; 
    overflow: hidden; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

#slider-main #slider img{ 
    height: 100%; 
    width: 100%; 
} 

.section3{ 
    height: 573px; 
    width: 100%; 
    background-color: #de5670; 
    overflow: hidden; 
} 

.section4{ 
    height: 573px; 
    width: 100%; 
    background-color: #de5312; 
    overflow: hidden; 
}

出典

2016-10-17 04:38:32 Bassam

DIVは別の部門と重複しています

答えて

関連する問題