div设置为绝对位置，不会将其他div压低到低于

我有一个div，它位于绝对位置，我知道它的意思是不会将div下推，但我怎样才能不用margin margin或top为下面的div。div设置为绝对位置，不会将其他div压低到低于

我想.header留在position: absolute，但它下面的div .blog应该在它下面堆叠。

body { 
 
    font-family: Georgia, serif; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
.header { 
 
    background-color: #e9118c; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    position: absolute; 
 
    padding: 5px 0 5px 0; 
 
} 
 
.inner-container { 
 
    padding: 0 30px 0 30px; 
 
    width: 1100px; 
 
    display: inline; 
 
} 
 
.search, 
 
.social { 
 
    display: inline-block; 
 
    width: 600px; 
 
} 
 
.social { 
 
    text-align: right; 
 
} 
 
.social img { 
 
    width: 35px; 
 
} 
 
.blog { 
 
    position: relative; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<header> 
 
    <title>Christina's Baking Adventure</title> 
 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,500,700,900' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" type="text/css" href="./christinasbakingadventure.css"> 
 
</header> 
 
<body> 
 

 
<div class="container"> 
 
    <div class="header"> 
 
    <div class="inner-container"> 
 
     <div class="search"> 
 
     search box 
 
     </div> 
 
     <div class="social"> 
 
     <img src="./fb-icon.png" alt="facebook"> 
 
     <img src="./fb-icon.png" alt="facebook"> 
 
     <img src="./fb-icon.png" alt="facebook"> 
 
     <img src="./fb-icon.png" alt="facebook"> 
 
     <img src="./fb-icon.png" alt="facebook"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="blog"> 
 
    <div class="inner-container"> 
 
     <img src="./christinasbakingadventurelogo.png" style="width: 350px;" alt="Christina's Baking Adventure logo"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2015-01-26 Christina

请问有没有办法做你想要什么，而无需使用绝对？绝对定位的元素不会改变其他元素的位置，无论如何 – 2015-01-26 20:09:00

我不能看到没有使用填充或边距的解决方案.. – 2015-01-26 20:14:30

如果你所做出的头部位置：相对的，浮在水面的博客？

body { 
 
    \t font-family: Georgia, serif; 
 
    } 
 
    
 
    .clear { 
 
    \t clear: both; 
 
    } 
 
    
 
    .header { 
 
    \t background-color: #e9118c; 
 
    \t left: 0; 
 
    \t right: 0; 
 
    \t top: 0; 
 
    \t postition: relative; 
 
    \t padding: 5px 0 5px 0; 
 
    } 
 
    
 
    .inner-container { 
 
    \t padding: 0 30px 0 30px; 
 
    \t width: 1100px; 
 
    \t display: inline; 
 
    } 
 
    
 
    .search, .social { 
 
    \t display: inline-block; 
 
    \t width: 600px; 
 
    } 
 
    
 
    .social { 
 
    \t text-align: right; 
 
    } 
 
    
 
    .social img { 
 
    \t width: 35px; 
 
    } 
 
    
 
    .blog { 
 
    \t float: left; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
    \t <header> 
 
    \t \t <title>Christina's Baking Adventure</title> 
 
    \t \t <link href='http://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,500,700,900' rel='stylesheet' type='text/css'> 
 
    \t \t <link rel="stylesheet" type="text/css" href="./christinasbakingadventure.css"> 
 
    \t </header> 
 
    \t <body> 
 
    \t \t <div class="container"> 
 
    \t \t \t <div class="header"> 
 
    \t \t \t \t <div class="inner-container"> 
 
    \t \t \t \t \t <div class="search"> 
 
    \t \t \t \t \t \t search box 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t \t <div class="social"> 
 
    \t \t \t \t \t \t <img src="./fb-icon.png" alt="facebook"> 
 
    \t \t \t \t \t \t <img src="./fb-icon.png" alt="facebook"> 
 
    \t \t \t \t \t \t <img src="./fb-icon.png" alt="facebook"> 
 
    \t \t \t \t \t \t <img src="./fb-icon.png" alt="facebook"> 
 
    \t \t \t \t \t \t <img src="./fb-icon.png" alt="facebook"> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t <div class="clear"></div> 
 
    \t \t \t <div class="blog"> 
 
    \t \t \t \t <div class="inner-container"> 
 
    \t \t \t \t \t <img src="./christinasbakingadventurelogo.png" style="width: 350px;" alt="Christina's Baking Adventure logo"> 
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </body> 
 
    </html>

来源

2015-01-26 20:39:33 ErinJoan

，如果你不想改变位置.header和.blog，只需添加顶部.blog jsfiddle

 div class="container"> 
      <div class="header"> 
       <div class="inner-container"> 
        <div class="search"> 
         search box 
        </div> 
        <div class="social"> 
         <img src="./fb-icon.png" alt="facebook"> 
         <img src="./fb-icon.png" alt="facebook"> 
         <img src="./fb-icon.png" alt="facebook"> 
         <img src="./fb-icon.png" alt="facebook"> 
         <img src="./fb-icon.png" alt="facebook"> 
        </div> 
       </div> 
      </div> 
      <div class="clear"></div> 
      <div class="blog"> 
       <div class="inner-container"> 
        <img src="./christinasbakingadventurelogo.png" style="width: 350px;" alt="Christina's Baking Adventure logo"> 
       </div> 
      </div> 
     </div>

CSS

body { 
    font-family: Georgia, serif; 
} 

.clear { 
    clear: both; 
} 

.header { 
    background-color: #e9118c; 
    left: 0; 
    right: 0; 
    top: 0; 
    position: absolute; 
    padding: 5px 0 5px 0; 
} 

.inner-container { 
    padding: 0 30px 0 30px; 
    width: 1100px; 
    display: inline; 
} 

.search, .social { 
    display: inline-block; 
    width: 600px; 
} 

.social { 
    text-align: right; 
} 

.social img { 
    width: 35px; 
} 

.blog { 
    position: relative; 
    top: 60px; 
}

来源

2015-01-26 20:49:04

我想你想要m ake简单的东西很难;-)

首先，在开始编码自己的clasess和东西之前，考虑清除最常用标签的默认值，即设置填充，边距，边框和轮廓等的值。为0。例如像这样：

html, body, div, span, h1, h2, h3, h4, h5, h6, p, 
blockqoute, a, acronym, address, big, cite, code, img, q, small, strong, ol, ul, li, 
fieldset, form, label, table, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
}

这样做，你会保持在你的网页上尽可能的元素尽可能多的控制，你会避免许多suprises。

大多数情况下，您不会避免使用maring/padding - 但只需知道这些属性的所有值。

仅清除身体标记的填充和边距将使您的标题棒很好地容易地位于页面的左上角。不需要绝对的位置。

html, body, div, span, h1, h2, h3, h4, h5, h6, p, 
 
     blockqoute, a, acronym, address, big, cite, code, img, q, small, strong, ol, ul, li, 
 
     fieldset, form, label, table, tr, th, td { 
 
      margin: 0; 
 
      padding: 0; 
 
      border: 0; 
 
      outline: 0; 
 
      font-size: 100%; 
 
      vertical-align: baseline; 
 
      background: transparent; 
 
     } 
 

 
     body { 
 
      font-family: Georgia, serif; 
 
     } 
 

 
     .clear { 
 
      clear: both; 
 
     } 
 

 
     .header { 
 
      background-color: #e9118c; 
 
/* You don't have to have 4 values. 2 are equal to top-down left-right. */ 
 
      padding: 5px 0; 
 
      margin: 0; 
 
     } 
 

 
     .inner-container { 
 
      padding: 0 30px; 
 
      width: 1100px; 
 
      display: inline; 
 
     } 
 

 
     .search, .social { 
 
      display: inline-block; 
 
      width: 600px; 
 
     } 
 

 
     .social { 
 
      text-align: right; 
 
     } 
 

 
      .social img { 
 
       width: 35px; 
 
      } 
 

 
     .blog { 
 
      margin-top: 5px; 
 
     }

<!DOCTYPE html> 
 

 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    </head> 
 
<body> 
 
    <div class="container"> 
 
     <div class="header"> 
 
      <div class="inner-container"> 
 
       <div class="search"> 
 
        search box 
 
       </div> 
 
       <div class="social"> 
 
        <img src="./fb-icon.png" alt="facebook"> 
 
        <img src="./fb-icon.png" alt="facebook"> 
 
        <img src="./fb-icon.png" alt="facebook"> 
 
        <img src="./fb-icon.png" alt="facebook"> 
 
        <img src="./fb-icon.png" alt="facebook"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="clear"></div> 
 
     <div class="blog"> 
 
      <div class="inner-container"> 
 
       <!-- I'd recommend not to use inline styles. It's easier to maintain your code when everything is in stylesheet.--> 
 
       <!-- Create for example an id #logo with width set to 350 --> 
 
       <img src="./christinasbakingadventurelogo.png" style="width: 350px;" alt="Christina's Baking Adventure logo" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2015-01-26 21:20:22 ttarczynski

非常感谢。非常感谢。 – Christina 2015-01-26 23:22:24

不客气:-) – ttarczynski 2015-01-27 06:40:48

div设置为绝对位置，不会将其他div压低到低于

回答

相关问题