容器上的重叠元素

-1

我正在开发一个网站，我被困住了，我在我的容器类中添加了滑块。容器上的重叠元素

在我的侧栏添加margin-top后，我的滑动条与我的部分重叠，所有我的标记都获得了margin-top。

我该如何解决这个问题？

这里是我的HTML代码：

<body> 

<nav class="cf"> 
    <ul> 
     <li><a href="#" class="current">Home</a> </li> 
     <li><a href="#">About</a> </li> 
     <li><a href="#">Services</a> </li> 
     <li><a href="#">Porfolio</a> </li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 
<div id="container">

 <div class="info1"> 
       <img src="images/infoicon1.png" alt="icon1"> 
       <h1>Best services</h1><br> 
       <p>We offer you best web solutions for business.</p> 
     </div> 
<div class="info2"> 
       <img src="images/infoicon2.png" alt="icon1"> 
       <h1>Cloud System</h1><br> 
       <p>Be unique !! Get cloud system for your business.</p> 
     </div> 
     <div class="info3"> 
       <img src="images/infoicon3.png" alt="icon1"> 
       <h1>Contact us</h1><br> 
       <p>Start improving your online business.</p> 
     </div>

<div id="s3slider"> 
<ul id="s3sliderContent"> 
    <li class="s3sliderImage"> 
     <img src="wide/6.jpg"> 
     <span>Your text comes here</span> 
    </li> 
    <li class="s3sliderImage"> 
     <img src="wide/2.jpg"> 
     <span>Your text comes here</span> 
    </li> 
    <div class="clear s3sliderImage"></div> 
</ul>

这里是我的CSS代码

body { 
    background: #ffffff; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 100%; 
    width: 100%; 
    margin: 0 auto; 
    padding: 0; 

nav { 
    background: #333333; 
    height: 60px; 
    margin-top: 8%; 
    } 
nav ul { 
    list-style: none; 
    padding: 0; 
    margin: 0 auto; 
    position: absolute; 
    left: 30%;} 

nav ul li { 
    float:left; 
    display: inline; 
    font-size: 120%; 
    padding:16px; 
} 
nav ul li a { 
    color: #ffffff; 
    text-decoration: none; 
    display: inline-block;} 

nav a:link, nav a:visited { 
    color: #ffffff; 
    height:60px;} 

#container { 
    position: relative; 
    width: 80%; 
    left: 10%;} 


#mainHeader { 
    margin-top: 1%; 
    display: block;} 

.info1 { 
    position: absolute; 
    background: #0088cc; 
    width: 30%; 
    border-radius: 9px;} 

.info1 img { 
    width: 30%; 
    height: 0 auto; 
    float:left; 
    margin-top: 1%;}`.info1 h1 { 
    float:left; 
    margin-top: 1%; 
    color: #ffffff; 
    margin-left: 8%;` 

.info1 p { 
    float:left; 
    width: 60%; 
    margin: 0; 
    margin-bottom: 1%; 
    padding-left: 3%;} 

#s3slider { 
    width:98%; /* important to be same as image width */ 
    height: 300px; /* important to be same as image height */ 
    position: relative; /* important */ 
    overflow: hidden;} /* important */ 



#s3sliderContent { 
    width: 98%; /* important to be same as image width or wider */ 
    position: absolute; /* important */ 
    top: 0; /* important */ 
margin-left: 0; /* important */` 

    .clear { 
    clear: both;}

例如： a link！

来源

2013-04-25 user2317735

因为.info1是position: absolute;和.info1 h1更好地利用display:inline-block;和.info1 p而非float:left;。如果你仍然希望它被绝对定位。给nav/.info1 a margin-bottom: height-of-info1;

作出Fiddle更好的解决方案。

来源

2013-04-25 00:53:03

工作就像一个魅力，谢谢 – user2317735 2013-04-26 15:06:55

容器上的重叠元素

回答

相关问题