为什么包装 div 在具有绝对子 div 时不会展开 [英] Why won't wrapper div expand when it has an absolute child div

问题描述

我有一个包装器 div 设置为 960 像素，在它里面，我有另一个名为滑块"的 div.使用以下代码将滑块绝对定位在屏幕中间:

I have a wrapper div set to 960px and inside it, I have another div called "slider". Slider is positioned absolutely in the middle of the screen using this code:

#slider {width:390px; height:100px; position:absolute; 
         margin:-100px 0 0 -200px; top:50%; left:50%; border:1px solid;}

我为包装器和滑块 div 添加了边框，以便我可以看到它们在屏幕上的位置，但是，这表明包装器没有扩展以包含绝对滑块 div.

I have added borders to both the wrapper and slider divs so that I can see how they are positioned on the screen however, this has revealed that the wrapper is not expanding to contain the absolute slider div.

如何解决这个问题，使包装纸的高度正确?

How do I fix this so that the height of the wrapper is correct?

推荐答案

当您在元素上使用 position:absolute; 时，它位于文档流之外，不会影响其他内容.

When you use position:absolute; on an element it is position outside of the document flow and does not impact on the other content.

如果可以，请删除 position:absolute; 并使用其他方法将滑块 div 居中.如果您需要 position:absolute; 那么这是不可能的.

If you can, remove position:absolute; and use other methods to center your slider div. If you need the position:absolute; then it is not possible.

这篇关于为什么包装 div 在具有绝对子 div 时不会展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！