div 设置为绝对位置，而不是将其他 div 向下推到它下面答案

【问题标题】：Div set to absolute position not pushing other div down below itdiv 设置为绝对位置，而不是将其他 div 向下推到它下面
【发布时间】：2016-03-18 20:07:12
【问题描述】：

我有一个定位为绝对的 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>

【问题讨论】：

不使用absolute就没有办法做你想做的事吗？绝对定位的元素无论如何都不会改变其他元素的位置
如果不使用填充或边距，我看不到解决方案..

标签： html css absolute

【解决方案1】：

如果您将标题位置设置为：relative 并且只是浮动博客怎么办？

    body {
    	font-family: Georgia, serif;
    }
    
    .clear {
    	clear: both;
    }
    
    .header {
    	background-color: #e9118c;
    	left: 0;
    	right: 0;
    	top: 0;
    	postition: relative;
    	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 {
    	float: left;
    }

<!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>

【讨论】：

【解决方案2】：

如果您不想更改 .header 和 .blog 的位置，只需在 .blog 中添加 top 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;
}

【讨论】：

【解决方案3】：

我认为您正在尝试使简单的事情变得困难；-)

首先，在开始编写自己的类和东西之前，请考虑清除最常用标签的默认值，即将内边距、边距、边框和轮廓等的值设置为 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;
}

通过这样做，您将尽可能多地控制页面上的元素，并避免许多意外。

而且大多数时候您不会避免使用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>

【讨论】：

非常感谢。非常感谢。