Question

这里所有的，非常愚蠢的问题，我确信我只是度过了漫长的一天，但我做错了什么？我只是想把我的右边（稍微大一点）的div漂浮在我的左边div上。请参阅下面的代码：

<style>
body{margin: 0; padding: 0;}
#wrapper {width: 1010px; margin: 0 auto; height: 100%;}
#header_txt {width: 434px; height: 162px; margin: 40px auto;}
#content {position: relative;}
#left {width: 488px; height: 1081px; float: left; background: url(images/img-left.jpg); z-   index: 3; position: relative;}
#right {width: 688px; height: 1081px; float: right; z-index: 2; position: relative;}
</style>

</head>


<body>
<div id="wrapper">
    <div id="header">
        <img src="images/img-header.jpg">
    </div>
    <div id="header_txt">
        <img src="images/img-txt.jpg">
    </div>
    <div id="content">
        <div id="left"></div>
        <div id="right">
            <p>text goes here..</p>
        </div>
    </div>
</div>
</body>


</html>

Answer 1

z-indexing不像你想象的那样工作（我认为:)。浮动将占据水平和垂直空间 - 你不能用z-index拾取其中一个边缘。您需要在其中一个上使用position: absolute;。

http://jsfiddle.net/YE8Lv/1/就是一个例子。

Answer 2

如果您只想在左侧div上右侧div，那么您根本不需要漂浮它们。如果你在它们上面使用position:absolute，然后将z-index设置在你想要的顶部，那么它将完成同样的事情。这是一个例子：

body { margin: 0; padding: 0; }
#wrapper { width: 1010px; margin: 0 auto; height: 100%; }
#header_txt { width: 434px; height: 162px; margin: 40px auto; }
#content { position: relative; }
#left { width: 488px; height: 1081px; position:absolute; background: url(images/img-left.jpg); z-index: 2; }
#right { width: 688px; height: 1081px; position:absolute; z-index: 3; }

另请注意，z-index不能包含任何空格。如果您使用z- index，它就无法工作。

Answer 3

您使用了错误的css属性，请尝试：

#right {
  width: 688px;
  height: 1081px;
  position: absolute;
  background-color: #000;
  display: inline-block;
  right: 0;
  z-index: 2;
}

#left {
  width: 488px;
  height: 1081px;
  background: url(images/img-left.jpg);
  position: absolute;
  background-color: #FF8181;
  display: inline-block;
  left: 0;
  z-index: 1;
}

如何使用z-index与浮点数？

3 个答案: