Question

我正在开发一个网站，并且在我将滑块添加到我的容器类中时，我被卡住了。

我的滑块与我的部分重叠，在我的边栏上添加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！

Answer 1

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

制作Fiddle以获得更好的解决方案。

容器上的重叠元素

1 个答案: