绝对定位，忽略填充 [英] Absolute positioning ignoring padding
本文介绍了绝对定位，忽略填充的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在带有填充的父div底部使用按钮放置div.
I am trying to position a div with buttons at the bottom of a parent div that has a padding.
预期结果是将按钮放在填充物(绿色区域)的顶部.
The expected result is having the button resting on top of the padding (green area).
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none;
/* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
a,
a:focus,
a:hover {
color: #fff;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url("../img/blank.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
html,
body {
height: 100%;
}
body {
color: #fff;
text-align: left;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
#mcontainer {
position: relative;
float: left;
padding: 10%;
width: 100%;
height: 100%;
}
#header h1 {
margin: 0px;
}
#header {
height: auto;
}
#footer .link-item a {
display: table-cell;
padding: 10px 10px;
border: 2px solid white;
}
#footer {
position: absolute;
top: auto;
bottom: 0%;
height: auto;
}
#footer .link-item:first-child {
border-spacing: 0px 10px;
margin: 10px 10px 10px 0px;
}
#footer .link-item {
border-spacing: 0px 10px;
margin: 10px 10px;
}<!DOCTYPE html>
<html lang="en">
<body>
<div id="mcontainer">
<div id="header">
<h1>Text</h1>
</div>
<div id="footer">
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
</div>
</div>
</body>
</html>任何帮助将不胜感激.
推荐答案
绝对定位不考虑填充.一种可能的解决方案是在 .mcontainer 内添加另一个容器，该容器也具有 position:relative .这样，内部容器将尊重填充，而绝对定位的元素将位于内部容器的底部.
Absolute positioning does not take padding into account. A possible solution would be to add another container inside .mcontainer, that also has position: relative. That way, the inner container would respect the padding, and the absolute positioned element would be at the bottom of the inner container.
这篇关于绝对定位，忽略填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
