Question

您好我正在尝试制作简单的网站（我正在学习这个）。我创建了简单的网站（静态网站）。我想用CSS动态尝试一下。所以试过this。我希望他们能够超过一圈，这样我就能创建出像这样的好文件

    _ ______  _ _______
   |N|De|N|De|N|Details|.....Etc
   |A|  |A|  |A|       |     
   |M|  |M|  |M|       |     
   |E|  |E|  |E|       |     
   |_|__|_|__|_|_______|

但它看起来像这样

  _ _______  _ _______
   |N|Details||N|Details|.....Etc
   |A|       ||A|       |
   |M|       ||M|       |
   |E|       ||E|       |
   |_|_______||_|_______|

如何做到这一点 js小提琴链接：http://jsfiddle.net/kdGCu/

Answer 1

你的CSS中的东西非常混乱，所以让我们以正确的方式做到这一点，我从头开始做了一个例子

使用position: relative;容器并包装所有3个div并指定position: absolute;。

现在使用top和left属性来叠加它们......

Demo（堆叠演示）

Demo（根据您的需要修改）

Demo（播放z-index以显示悬停时的内容）

在CSS中使用nth-of-type这意味着它将选择第n种类型的元素，在这种情况下它是div这里

CSS

<div class="wrap">
    <div></div>
    <div></div>
    <div></div>
</div>

.wrap {
    position: relative;
}

.wrap div {
    height: 300px;
    width: 300px;
    position: absolute;
}

.wrap div:nth-of-type(1) {
    background: #f00;
    top: 0;
    left: 0;
}

.wrap div:nth-of-type(2) {
    background: #00f;
    top: 0;
    left: 40px;
}

.wrap div:nth-of-type(3) {
    background: #0f0;
    top: 0;
    left: 80px;
}

Answer 2

好吧，我觉得我现在明白了问题，我觉得我找到了解决方案，你几乎完成了但是缺少了一些东西，只是我为width添加了div.mainContainer>div并修复了你的.Child课程，您可以在代码更新中找到解决方案：http://jsfiddle.net/kdGCu/2/

div.mainContainer>div {
    display:inline-block;
    float:left;
    position:relative;
    overflow:auto;
    width: 5em;
}

.Child {
    z-index:5;
}

我希望我帮助过你。

Answer 3

这个想法是使用负边际。

.Profiles {
    width:20em;
    height:300px;
    border: 2px solid black;
    border-radius:10px;
    left:1em;
    z-index:0;
    position:relative;
    margin-left:-20px;
}

请参阅此jsfiddle。http://jsfiddle.net/harendra/kdGCu/3/

如何在html中重叠div

3 个答案: