CSS 设置绝对位置和边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9350775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set position absolute and margin
提问by kirby
I would like to set an element's positionto absoluteand have a margin-bottom, but it seems that the margin-bottomdoesn't have an effect.
我想将一个元素设置position为absolute并有一个margin-bottom，但似乎margin-bottom没有效果。
HTML:
HTML：
<div id='container'></div>
CSS:
CSS：
#container {
border: 1px solid red;
position: absolute;
top: 0px;
right: 0px;
width: 300px;
margin-bottom: 50px; // this line isn't working
}
采纳答案by Niet the Dark Absol
What are you expecting margin-bottomto do when your element is positioned by its top side?
margin-bottom当您的元素位于其顶部时，您希望做什么？
margin-bottomwill only do anything to an absolutely-positioned element if the element has no topproperty.
margin-bottomabsolute如果元素没有top属性，则只会对ly 定位的元素执行任何操作。
回答by Joey
I know this isn't a very timely answer but there is a way to solve this. You could add a "spacer" element inside the element positioned absolutely with a negative bottom margin and a height that is the same size as the negative bottom margin.
我知道这不是一个非常及时的答案，但有办法解决这个问题。您可以在定位absolute为负底边距和与负底边距相同大小的高度的元素内添加一个“间隔”元素。
HTML:
HTML：
<div id="container">
<div class="spacer"></div>
</div>
CSS:
CSS：
// same container code, but you should remove the margin-bottom as it has no effect
// spacer code, made it a class as you may need to use it often
.spacer {
height: 50px;
margin: 0 0 -50px 0;
/* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}
回答by nik
Building upon Joey's answer, for a cleaner markup, use the CSS :after-selector to add a spacer for the desired bottom margin.
基于Joey 的回答，为了更清晰的标记，请使用 CSS:after选择器为所需的底部边距添加一个间隔。
CSS
CSS
#container:after {
position: absolute;
content: "";
bottom: -40px;
height: 40px;
width: 1px;
}
回答by Notlaw
You need to set the positionto relativein order to set its margin.
您需要设置position到relative以设定的margin。
The margin-bottom, margin-leftand margin-rightwill NOTwork when the element is in position: absolute.
的margin-bottom，margin-left并且margin-right将不是当元素是在工作position: absolute。
Example: HTML:
示例： HTML：
<img src="whatever.png"/>
CSS:
CSS：
img {
position: relative;
margin: 0 auto;
}
回答by Tom McDonough
I have found the solution!!!
我找到了解决方案！！！
set a min-height of the container, the position will need to be changed from absolute to inherit, set the top property to a value of your choice and the display will need to be inline-block.
设置容器的最小高度，位置将需要从绝对更改为继承，将顶部属性设置为您选择的值，并且显示需要是内联块。
This worked for me when I tried using position absolute, moving the element with top property and try to add a margin.
当我尝试使用绝对位置，使用 top 属性移动元素并尝试添加边距时，这对我有用。
min-height: 42px;
display: inline-block;
top: 6px;
position: inherit;
回答by Dovev Hefetz
Since I don't know the height in advance, I instead added an invisible element at the end of the absolutely positioned with a height that I wanted the margin to be.
由于我事先不知道高度，所以我在绝对定位的末尾添加了一个不可见元素，其高度是我希望边距的高度。
In my case, the absolutely positioned element is a table, so I added an extra empty row with a height of 100px. Then the border that was supposed to be at the bottom of the table went on "tr:nth-last-of-type(2) td" instead.
在我的例子中，绝对定位元素是一个表格，所以我添加了一个额外的空行，高度为 100px。然后应该在表格底部的边框改为“tr:nth-last-of-type(2) td”。
Hope this helps.
希望这可以帮助。
回答by morteza
I have an absolute position and need to set a margin in right side. here the way i come up with:
我有一个绝对位置，需要在右侧设置一个边距。这是我想出的方式：
position:absolute;
top:0px;
left:10px;
width: calc(99% - 10px);
height:80%;
回答by Bart?omiej Zalewski
For some use cases, changing position: absoluteto position: relativesolves this problem as well. If you can change your positioning, it will be the simplest way to solve the problem. Otherwise, the spacer of Joey does the trick.
对于某些用例，更改position: absolute为也position: relative可以解决此问题。如果你能改变你的定位，这将是解决问题的最简单的方法。否则，乔伊的垫片就能解决问题。
