Div设置为绝对位置，不会将其他div推到它下面

时间：2015-01-26 20:04:35

标签： html css3 absolute

我有一个div定位为绝对，我知道它的意思是不要将div推到它下面，但是如果不使用margin bottom或者top下面的div，我怎么能这样做。

我希望.header与position: absolute保持一致，但.blog下方的div应该位于其下方。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

如果你做了标题位置怎么样：亲戚并且只是浮动了博客？

＆＃13;
＆＃13; 
    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;
    }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

如果你不想改变.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;
}

答案 2 :(得分：0)

我认为你正在努力做一些简单的事情;-)

首先，在开始编写自己的clasess和stuff之前，请考虑清除最常用标记的默认值，即将填充，边距，边框和轮廓等的值设置为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>

相关问题
最新问题