0

我正在开发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 个元素组合成一行。但是，保留元素下原始位置的空格。如何删除下面的空白？

4

2 回答 2

1

relative定位保留元素最初放置的空间。改为使用position:absolute。但是，绝对定位的工作方式不同。relative 获取相对于元素原始位置的坐标，而 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>

旁注：避免内联样式并且您的标记被破坏 - 您缺少<.

查看演示

于 2013-07-23T11:17:08.733 回答
1

那是因为您使用的是相对定位。为了使相对定位起作用，浏览器必须首先加载 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>在这种情况下是否更合适

于 2013-07-23T11:18:00.047 回答