CSS可以真正覆盖页面上HTML元素的顺序吗？ [英] Can CSS truly override the order of HTML elements on a page?

问题描述

如果在页面上有多个 div ，你可以使用CSS来调整大小，将它们浮动并将它们移动一些...但我看不到一种克服第一个 div 会在页面顶部附近显示，最后一个 div 靠近底部！我不能完全覆盖元素的顺序，因为它们来自源HTML，你能吗？

If you have several divs on a page, you can use CSS to size, float them and move them round a little... but I can't see a way to get past the fact that the first div will show near the top of the page and the last div will be near the bottom! I cannot completely override the order of the elements as they come from the source HTML, can you?

我必须缺少一些东西，因为人们说我们可以改变外观整个网站只需编辑一个CSS文件，但这将取决于你仍然想要在相同的顺序 div ！

I must be missing something because people say "we can change the look of the whole website by just editing one CSS file.", but that would depend on you still wanting the divs in the same order!

（PS我相信没有人在页面上的每个元素上使用 position：absolute 。）

(P.S. I am sure no one uses position:absolute on every element on a page.)

推荐答案

使用浮动，并且位置绝对，你可以拉一些很好的定位魔术来改变页面的某些顺序。

With Floating, and with position absolute, you can pull some pretty good positioning magic to change some of the order of the page.

例如，使用StackOverflow，如果标记设置正确，标题和主体内容可以是标记中的前两项，然后是导航/搜索，最后是右侧边栏。这将通过具有顶部边缘足够大以保持导航的内容容器和足够大以容纳侧边栏的右边距来实现。然后两者都可以绝对定位到位。标记可能如下所示：

For instance, with StackOverflow, if the markup was setup right, the title, and main body content could be the first 2 things in the markup, and then the navigation/search, and finally the right hand sidebar. This would be done by having a content container with a top margin big enough to hold the navigation and a right margin big enough to hold the sidebars. Then both could be absolutely positioned in place. The markup might look like:

<h1> Stack Overflow </h1>
<div id="content">
  <h2> Can Css truly blah blah? </h2>
  ...
</div>
<div id="nav">
  <ul class="main"><li>quiestions</li> ... </ul>
  ....
</div>
<div id="side">
  <div class="box">
    <h3> Sponsored By </h3>
    <h4> Lew Zelands fish market </h4>
    ....
  </div>
</div>

和css一样

h1 { position: absolute; top: 0; left: 0; }
#content { margin-top: 100px; margin-right: 250px; }
#nav { position: absolute; top: 0; left: 300px; }
#side { position: absolute; right: 0; top: 100px; }

这里重要的是，标记必须用这种定位魔法。

The important thing here is that the markup has to be done with this kind of positioning magic in mind.

更改项目，使导航栏在左侧，导航栏下方的侧栏太难。

Changing things so that the navbar is on the left and the sidebar below the nav be too hard.

这篇关于CSS可以真正覆盖页面上HTML元素的顺序吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！