CSS可以将元素从正常流程中移除并按任何方式在任何位置定位。 但它不能创建新的流程。
我的意思是,您可以将html文档中的最后一个项目定位在页面/窗口的开头/顶部,并将html文档中的第一个项目定位在页面/窗口的结尾/底部。 但是当您这样做时,无法相对于彼此定位这些项目; 您必须自己知道页面末尾距离多远,才能正确地定位来自html文档的第一个项目。如果该内容是动态的(即来自数据库或CMS),则这可能不容易。
使用浮动和绝对定位,您可以进行一些很好的定位魔术来更改页面的某些顺序。
例如,在 StackOverflow 上,如果标记设置正确,则标题和主体内容可以成为标记中的前两个元素,然后是导航/搜索,最后是右侧边栏。这可以通过具有足够大的顶部外边距以容纳导航和足够大的右侧外边距以容纳侧边栏的内容容器来实现。然后,两者都可以被绝对定位在其位置上。标记可能如下所示:
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;
}
<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> New Zelands fish market </h4>
....
</div>
</div>
重要的是,必须考虑到这种定位魔法来进行标记。
将导航栏放在左侧,边栏放在导航下方可能会很困难。
使用CSS display属性的table-caption、table-row和table-cell值允许在仅通过CSS控制的情况下垂直排序最多三个元素。
这是更近期的方法,只能在所有最新的浏览器中使用(是的,在IE9中会失败):使用flexbox CSS属性。
您不需要在每个元素上使用position:absolute来实现您想要的效果。
您只需在一些关键项目上使用它,然后您可以将它们定位在任何位置,同时移动包含在其中的所有项目以及该部分的根元素。
我认为最重要的因素是语义化地放置你的HTML元素,幸运的是,你在CSS中的布局不需要太多的工作。例如,你网站的标题可能是页面上的第一个元素,接着是常见导航、子导航、内容和页脚(不完全列表)。
你想要处理的90-95%的布局可能相对容易将标记转化为你想要的东西。其他5-10%的布局可能需要更多的努力,但你需要问自己的问题是“我有多频繁地想要将我的网站标题定位在页面的右下角?”
我始终发现,在事后改变外观和感觉时,网站的布局并不太难处理,至少与从头开始编写代码相比不算什么。
</ 2c>
使用position:absolute,您可以完全独立于源顺序定位单个框。因此,您可以使用CSS将标题移动到页面底部,将页脚移动到页面顶部。
但请注意,这通常对可访问性不利:您应该在源中将内容的顺序与为读者呈现的顺序更或多或少相同。原因是屏幕阅读器或类似设备将按照源中定义的顺序呈现内容,而不是由CSS定义的视觉顺序。
关于头部总是在首位,底部总是在最后的观点非常好!但是我可能想把我的广告DIV从顶部移到右边。
我听说的另一件事是将内容DIV放在首位,这样Google会更关注你(靠近页面顶部的相关关键字得分更高)...或者这只是一个神话?做到这一点也需要我所询问的CSS技巧。