位置：继承与重叠可能吗？

我想让两个正方形在父div中互相重叠。正方形使用position：inherit。请注意，正方形的数量是动态的。另请注意，父div使用margin-left：30％。这可能吗？位置：继承与重叠可能吗？

<div style="border: 1px solid Black; width: 300px; height:300px; margin-left:30%;"> 
    <div style="height:40px; width:40px; border: 1px solid Black; position:inherit; left:0px; top: 0px;"></div> 
    <div style="height:40px; width:40px; border: 1px solid Black; position:inherit; left:0px; top: 0px;"></div> 
</div>

http://jsfiddle.net/AzYUn/1/

来源

2012-12-17 Skalis

你为什么要做'position：inherit'？无论如何，他们继承了什么，因为你甚至没有在父母上设置任何“职位”？ – BoltClock

究竟是你想要什么？明确指定 – Milind

我正在创建一个scrum墙。两个“方块”的位置从数据库中检索，父div是墙壁。我想我需要使用位置继承，因为父div没有绝对定位（墙将在浏览器中居中）。 – Skalis

摆脱position: inherit;和使用position: relative;。

使用top,right, bottom和left属性可以移动元素并使其重叠。

CSS

div.parent { 
    border: 1px solid black; 
    margin-left: 30%; 
    height: 300px; 
    width: 300px; 
} 

div.parent > div.box { 
    height:40px; 
    width:40px; 
    border: 1px solid black; 
} 

div.parent > div.box.overlap { 
    position: relative; 
    top: -40px; 
}

HTML

<div class="parent"> 
    <div class="box"></div> 
    <div class="box overlap"></div> 
</div>

来源

2012-12-17 09:40:17

感谢您的回答。这会给我的解决方案带来一些压力，但我开始思考（如你的答案），减去定位是唯一的答案。 – Skalis

@Skalis尽管感觉不对，那就是CSS的工作原理。你只需接受并克服它 - 我确切地知道它的感觉。/hug/ –

我能想到的唯一方法是使用其它位置值 - 相对或绝对的，即使实现这一目标。

来源

2012-12-17 09:41:38 Shlizer

我也这样倾斜：.. – Skalis

位置：继承与重叠可能吗？

回答

相关问题