div容器在位置：绝对[重复]后收缩
<代码>
<body>
<div class="wrapper">
<header>
<div id="logo">
<img src="./img/logo.png">
</div>
</header>
</div>
</body>
CSS
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding:0;
margin:0;
background-color: #DCB894;
}
.wrapper{
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
}
header {
margin-top: 10px;
background-color: #BCD34C;
}
#logo{
border-style: solid;
border-color: magenta;
border-width: 2px;
position: relative;
height: auto;
}
#logo img {
width: 150px;
height: auto;
position: absolute;
margin: auto;
border-style: solid;
border-color: red;
border-width: 2px;
}
共有2个答案
我会避免绝对位置，如果你把你的图像包装在一个div中，你可以居中你的图像。
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding:0;
margin:0;
background-color: #DCB894;
}
.wrapper{
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
}
header {
margin-top: 10px;
background-color: #BCD34C;
}
#logo{
border-style: solid;
border-color: magenta;
border-width: 2px;
position: relative;
height: auto;
max-width: 220px;
overflow: hidden;
}
#logo figure {
width:52%;
margin: 0 auto;
}
#logo img {
width: 100%;
position:relative;
border-style: solid;
border-color: red;
border-width: 2px;
overflow: hidden
}<body>
<div class="wrapper">
<header>
<div id="logo">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/en/9/9d/Pepsilogo.png">
</figure>
</div>
</header>
</div>
</body>
是的，它应该这样做，因为position:absolute和position:fixed不会发生在它的父级或容器中。当您使用这两个css属性时，它们超出了常规文档的范围。这就是为什么parent treat inside没有内容，高度不会自动增加，直到通过css属性（例如height:100px）或min height:100px）明确地将高度设置为。
根据您当前的结构，您可以设置基于最低高度的徽标。
header {
min-height: 100px; // 100px here logo size assumed
}
或保持徽标图像的相对位置：
#logo img {
position: relative;
}
-
问题内容： 我有3个要素。 第一个更大（包装）并具有 第2个相对于第1个相对位置绝对定位（并包含在第1个中） 第3个包含在第2个中，并且也具有绝对定位。 为什么第3个位置相对于第2个绝对位置（这也是第1个位置的绝对位置）而不是相对位置的第一个位置？ 因为3rd 是绝对定位到2nd的绝对定位。 问题答案： 因为就像重置孩子的相对位置一样。 这是无法解决的-如果您希望第三个相对于第一个绝对定位，则必须
-
我有一个具有绝对位置的div元素。位置值很重要，不能更改。如何在div中设置页眉、内容和页脚？ 页眉和页脚的高度是固定的，内容应该占用剩下的所有空间。同样重要的是，页眉始终在顶部，页脚在底部。 父元素也应该是可调整大小的，并使用south resizable句柄，内容应该根据父元素的高度改变其高度。 情况示例:http://jsfidle.net/7gpzf/26/
-
问题内容： 我知道有关类似主题的一些问题，但它们大部分相当于浮动div /图像。我需要将图像（和div）放置在绝对位置（向右偏移），但我只希望文本围绕它流动。如果我将div浮动，则可以使用，但是无法将其放置在所需的位置。因为它是文字，只是在图片后面流动。 是HTML的示例 随着CSS是： 这是一个Drupal主题，所以这些代码都不是我的，只是在将图片放在那里时，它并没有完全起作用。 问题答案： 绝
-
在页面布局中，将绝对定位的元素嵌套在相对定位的容器中，是一种很常见的布局。假设有两个元素，#outter 为父元素，#inner 为子元素： <div id="outter"> <div id="inner"></div> </div> 如果让父元素使用相对定位，子元素使用绝对定位，在 IE6 及更低版本中，它会有很多问题。最常见的问题有两个：一个问题是，当父元素的宽度为奇数时，子元素的
-
问题内容： 和CSS 和有什么不一样？那你什么时候应该使用呢？ 问题答案： CSS绝对定位 绝对定位是最容易理解的。您从CSS 属性开始： 这告诉浏览器应将要定位的所有内容从文档的正常流程中删除，并将其放置在页面上的确切位置。它不会影响HTML中它之前或之后的元素在网页上的放置方式，但是除非您重写它，否则 它将 取决于其父级的位置。 如果你想一个元素从文档窗口的顶部10个像素的位置，你会使用偏移与
-
我有这样的结构，我在一个div（包装器）里面包装三个div（顶部，中部，底部）： 正如您所看到的，包装器div有一个固定的高度，底部div相对于包装器div是绝对定位的。中间div有一个内容列表，我想要实现的是，使中间的div只占据顶部div和底部div之间的剩余高度，并且仍然能够滚动。我怎样才能做到这一点？