图解CSS - 搞懂基本布局 position

最新推荐文章于 2024-03-29 03:23:26 发布

lefex

最新推荐文章于 2024-03-29 03:23:26 发布

阅读量373

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/103351430

版权

这段时间公众号没更新，主要是因为一次项目的串讲，周末时间都在准备这次串讲，毕竟是第一次讲前端的内容，下了很大功夫把前端项目中用到的所有知识点「粗略」地讲了一下，共总结了32页pdf。经过这次串讲后，我便正式开始写前端业务，主要是App中使用的wap页面。万事开头难，起码前3个月不太好过，所有的东西都需要现学现卖。前面几篇文章「简单」地介绍了 CSS 布局，但是讲的太浅，发现真正在项目中使用的时候「力不从心」，今天再次学习 position 布局，争取搞懂它。

HTML中默认的布局方式是流式布局，也就是说浏览器会按HTML的书写顺序来布局，前提是不打破流式布局。下面这段代码是流式布局的效果。

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Position</title>    <style>        body {            height: 1000px;        }        * {            margin: 0;            padding: 0;        }        .con {            background-color: antiquewhite;            height: 80px;            width: 200px;        }        .div1 {            background-color: aquamarine;            height: 100px;            width: 200px;        }</style></head>
<body>    <div class="con"></div>    <div class="div1"></div></body>
</html>

去除样式后的代码：

<!DOCTYPE html><html lang="en">  <head></head>  <body>      <div class="con"></div>      <div class="div1"></div>  </body></html>

它的 DOM 结构如下，需要注意DOM 和 HTML 内容几乎是一样的，但是和 HTML 不同的是 DOM 是保存在内存中的树状结构，可以通过 JavaScript 来查询和修改其内容。

最外层的是 html，然后是 body，body 里嵌套了 2 个 div 标签，这些标签我们并没有修改它的 position，默认是 static，也就是遵循流式布局。

最终它的效果是这样的：

但事实不是这样的，比如做一个下面的样式：

这种布局方式流式布局根本实现不了，需要通过 position 来实现上面类似的效果。我们一起分析下 position。

Positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.

MDN

也就是说 position 可以使元素「打破流式布局」，把元素放到一个合适的位置，比如一直悬停在顶部的导航。我们使用 position 来实现上面的效果。在流式布局下，代码如下：

<body>
    <div class="con">        <div class="icon"></div>        <div class="title">File Transfer</div>        <div class="des">position布局</div>        <div class="time">10:00</div>    </div></body>

效果是这样的：

relative：相对布局，需要结合 top、bottom、left 和 right 配合使用，仅设置 position:relative 属性不管作用。它不会打破默认的布局的方式，只会在默认的布局方式发生偏移。把 des 选择器修改一下，发现【position布局】这个div 脱离了流式布局，但并没有打破流式布局，只是流式布局的位置空出来了而已。向左移动了90px，向上移动了 60px，你也可以通过 right 和 bottom 控制来达到同样的效果。采用 relative 布局的元素，它的起点是它所在流式布局中位置的左上角，而 top、bottom、left 和 right 就是基于这点进行移动位置：

.des {    position: relative;    top: -60px;    left: 90px;    font-size: 16px;    color: #666;    background-color: palegreen;}

absolute：绝对布局，这种布局方式会使元素脱离原有的流式布局，打破原有的布局方式。把 des 选择器修改一下：

.des {    position: absolute;    top: 0px;    left: 0px;    font-size: 16px;    color: #666;    background-color: palegreen;}

需要注意一点，使用绝对布局后，【position布局】这个div 脱离了流式布局，并移动到了左上角，原先的流式布局里也不再给这个 div 留有任何空间。对于 absolute 布局来说，它会找一个「参照物」来作为一个起点，选哪个「参照物」取决于它的祖先元素的 postion 属性，如果祖先没有设置 postion 属性，会依据默认的祖先（html标签）作为布局参考。下图就是依据 html 标签为参考。

如果把 des 的样式改为如下：

.des {    position: absolute;    bottom: 0px;    right: 0px;    font-size: 16px;    color: #666;    background-color: palegreen;}

效果如下，发现它跑道做右下角，这个右下角其实是可视区域的右下角:

我们改一下「参照物」，把 con 对应的 div 的 position 改为 absolute：

.con {    position: absolute;    background-color: lightgray;    height: auto;    width: 100%;}

结果如下：

fixed：它的作用就是把某个元素固定到某个位置，下面的代码实现导航不会移动，一直固定在顶部。

.top {    position: fixed;    z-index: 1000;    background-color: cornflowerblue;    height: 64px;    width: 100%;    color: white;    font-size: 30px;    text-align: center;    vertical-align: middle;}

介绍完相对布局和绝对布局，我们即可实现上面提到的效果，看下面的代码：

.con {    background-color: #F1F1F1;    height: auto;    width: 100%;}.icon {    position: relative;    top: 20px;    left: 20px;    background-color: aquamarine;    height: 80px;    width: 80px;}.title {    position: relative;    left: 120px;    top: -50px;    font-size: 20px;    color: black;    background-color: bisque;    width: 50%;}.des {    position: relative;    left: 120px;    top: -40px;    font-size: 16px;    color: #666;    width: 50%;    background-color: palegreen;}
.time {    position: absolute;    right: 10px;    top: 30px;    width: 40px;    font-size: 16px;    color: #666;    background-color: blue;}

<body>    <div class="con">        <div class="icon"></div>        <div class="title">File Transfer</div>        <div class="des">position布局</div>        <div class="time">10:00</div>    </div></body>