Question

我正在开发html网站。这是我的代码：

<html>
    <body>
        <div style="width:100%;height:50px;z-index:1;"></div> 
        <div style="width:100px;height:50px;z-index:2;position:relative;top:-50px;"></div>
        <div style="width:10px;height:50px;z-index:3;position:relative;top:-100px;"></div>
     </body>
</html>

这里的代码非常简单。我打算将3个元素分成一行。但是，元素在其原始位置下的空间是保留的。如何删除？

下的空白区域

Answer 1

relative定位会保留原本放置元素的空间。请改用position:absolute。但是，绝对定位的工作方式不同相对取坐标“相对”到元素的原始位置时，绝对取坐标相对于父^*元素的位置。

^*：最近的祖先，其他位置是静态的，如果没有，则为正文。在你的情况下，它将是身体。

示例：

<html>
    <body>
      <div style="position:relative">
        <div style="width:100%;height:50px;z-index:1;"></div> 
        <div style="width:100px;height:50px;z-index:2;position:absolute;top:0;"></div>
        <div style="width:10px;height:50px;z-index:3;position:absolute;top:0;"></div>
      </div>
     </body>
</html>

旁注：避免使用内联样式并且您的标记已损坏 - 您错过了<。

<强> See the demo

Answer 2

那是因为你正在使用相对定位。为了使相对定位起作用，浏览器必须首先加载DOM，以便它知道元素的原始位置，然后可以应用位置值来移动它，这意味着文档不会在定位元素周围重新流动因此你的白色空间。最快的解决方法是将div堆栈包装在相对位置div中，然后应用绝对定位

<div style="position:relative">
        <div style="width:100%;height:50px;z-index:1;"></div> 
        <div style="width:100px;height:50px;z-index:2;position:absolute;top:-50px;"></div>
        <div style="width:100px;height:50px;z-index:2;position:absolute;top:-100px;">/div>
</div>

你必须使用内部div位置值，但这应该适合你。具有相对位置设置的包装div使得绝对定位使用div作为父元素，而不是body元素，因此在您的示例中它不是必需的，但在现实世界中，您可能想要这样做。

但是，我会考虑在这种情况下<ul>元素是否更合适

CSS定位错误

2 个答案: