在css中使用z索引和位置来分离设计和核心！

Question

我使用yui-grids css (如果你不知道这是什么的话，那就无关紧要了)，它有三列。我把所有花哨的设计放在左列，并使用z索引和相对定位，将它们放在中间。然后把所有重要的东西，如表单，输入按钮，链接和上下文放在中心。这是不是错了。我从来没有见过这样做，所以我想也许有什么我不知道！或者我没有考虑。我应该只使用一列吗？

Answer 1

我不太清楚你在问什么，所以我会试一试：

列

如果你打算使用列布局，你应该只使用浮动元素。由于浮动的工作原理，一个clearfix hack将是次要的(链接如下)。Clearfix允许子元素浮动，同时保持父元素的高度和块性质。Clearfix只能添加到块元素。

对于我的示例，我们将使用两列布局--一个#content列和一个#侧栏列--您可以做两个、三个或更多。

对于父div (包含#content和#sidebar元素)，您需要添加一个class="clearfix“。

对于content div，你需要把它放在左边。对于侧边栏div，您需要将其向右浮动。

现在，CSS：

#parentDiv { width: 750px; margin: 0 auto; }
#parentDiv #content { float: left; width: 500px; }
#parentDiv #sidebar { float: right; width: 200px; }

这应该会产生一个750px的框，内容元素在左边，边栏在右边，两个元素之间有50px (750-(500+200) = 50)。

浮点模块

如果这不是您想要的，并且希望生成一个module元素(lightbox、弹出窗口等)，这也很容易。

首先，创建一个名为#module的div。把你的内容放进去。比方说，你想给它一个500px的宽度，你想把高度固定在300px。所以我们要做这个CSS：

#module { width: 500px; height: 300px; border: 1px solid #000; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -250px; z-index: 100; }

这是怎么回事？

正在将#module元素设置为position: absolute。这意味着它将在窗口中浮动，并且不受其父元素的约束。我们将其定位为窗口左侧的50%和顶部的50%，因此它位于窗口的中间。百分比值是次要的，因为它们会在窗口调整大小时进行调整。如果没有空白处，元素的左上角将从顶部和左侧各占50%，因此我们需要使用空白区将其向后移动一半的宽度和一半的高度。这将允许我们在中间完美地居中放置一个框。添加z索引是为了确保元素位于任何其他元素之上，包括和其他定位元素。

我希望这能帮到你。

链接

http://gist.github.com/550114：

• 补丁

Answer 2

在我看来，这种布局是不正确的。元素的设计必须在该特定元素中进行描述。