一键学会三种定位布局，相对定位、绝对定位、固定定位!

定位布局

定位属性： position
作用：  指定元素的定位类型
取值：static   默认不定位相对定位绝对定位固定定位

相对定位

关键字  position：relative
特点：相对不脱离文档流，并且是占有之前的位置，随着自身原来位置的左顶点进行位置偏移的。
偏移量：topleftrightbottom堆叠顺序：在元素出现堆叠效果时改变他们的顺序属性：  z-index取值：  没有单位的数字  值越大越靠上，可以是负数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{width: 300px;height: 300px;border: 1px solid red;margin: 0 auto;}.son1,.son2,.son3{width: 100px;height: 100px;}.son1{background-color: red;/* 相对定位 */position: relative;left: 100px;/* z-index:1; */}.son2{background-color: green;/* position: relative; */left: 100px;top: -100px;}.son3{background-color: blue;/* position: relative; */top: -200px;left: 100px;/* z-index: 1; */}</style>
</head>
<body><div class="father"><div class="son1"></div><div class="son2"></div><div class="son3"></div></div>
</body>
</html>

图示如下：

绝对定位

关键字： position：absolute
特点：脱离文档流，并且不占有之前的位置，随着页面的左顶点进行位置偏移。

****加粗样式一个简单的例子给大家看看：

一个简单的3x3竖向排列的小块给大家演示一下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.gfather{width: 600px;height: 600px;border: 1px solid red;margin: 0 auto;/* position: relative; */}.father{width: 300px;height: 300px;border: 1px solid red;margin: 100px auto;/* position: relative; */}.son1,.son2,.son3{width: 100px;height: 100px;}.son1{background-color: red;}.son2{background-color: green;position: absolute;top: 50px;left: 50px; }.son3{background-color: blue;/* position: absolute;top: 50px;left: 50px;  *//* right: 50px;  */}</style>
</head>
<body><div class="gfather"><div class="father"><div class="son1"></div><div class="son2"></div><div class="son3"></div></div></div>
</body>
</html>

图示如下：

子绝父相布局

就近原则  离谁近就依靠谁的左顶点进行位置偏移,就近在使用父级元素里面使用相对定位，子元素里面就近使用

这里还是用图示的方法给大家展示：
由于代码是一样的，我这边就不一一赘述了，就是在father父级里面使用相对定位，grandfather里面使用相对定位，子级小绿盒子跟随father进行偏移。

固定定位

1.随页面的左顶点进行偏移
2.脱离文档流，不占用之前位置
3.随页面的左顶点进行偏移（不受父元素影响）一直在一个位置

给大家展示代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* .father{width: 500px;height: 500px;border: 1px solid red;margin: 0 auto;} */ul li{list-style: none;width: 80px;height: 40px;background-color: teal;border-top: 1px solid white;text-align: center;line-height: 40px;color: white;/* 改变鼠标样式pointer  小手的样式 */cursor: wait;}ul{/* position: absolute;top: 0px;right: 20px; */position: fixed;top:100px;}a{color: white;text-decoration: none;cursor: wait;}</style>
</head>
<body><div class="father" id="top"></div>lorem*2000<ul><li>一元抢购</li><li>新品发布</li><li>联系客服</li><li>购物车</li><li>售后服务</li><li><a href="#top">回到顶部</a></li></ul>
</body>
</html>

图示如下：

**总结：**想要学好这三种定位布局其实很简单，只需要仔细理解某种定位的特点，结合案例分析练习体会其中的功能和作用即可！

**注意：**三种定位各有优势和缺点，需要将绝对定位和相对定位一起结合使用方可起到很好的作用，固定定位一般用在不需要动的导航条之类的！

一键学会三种定位布局，相对定位、绝对定位、固定定位!相关推荐

相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
相对定位绝对定位固定定位元素的层级
相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景相对定位 <!DOCTYPE html> <html lang="e ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
绝对定位,相对定位,固定定位和粘性定位的特性及区别,我整理一下放在文章最下面了,不用死记硬背,理解一下就ok,需要的话可以看看. 当导航栏头部没有别的模块时,想要滑动过程中导航栏一直在顶部,有两种写法 ...
CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位
CSS定位定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子. 定位的组成定位是将盒子定位在某一位置.按照定位的方式移动盒子. 定位=定位模式+边偏移. ...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
绝对定位、相对定位、固定定位特点
一.定位 1.定位的定义某个元素可以自由地在盒子上面移动,并且可以压着其他元素当滚动窗口时,某个元素可以固定在页面上可以让盒子自由的在某个盒子上进行移动并且可以压住其他盒子,或者可以在屏幕上固定 ...
手机换屏太贵！只需学会三种保养屏幕的方法，帮你远离换屏烦恼
手机在生活中算是一件贵重物品,而手机哪里最脆弱,那肯定就是手机屏幕啦,现在大家一般换手机的原因都是因为屏幕碎了,目前的智能手机换一块屏幕,起码要手机价值的三分之一以上,越贵的手机换屏幕越贵,而且新换的 ...
定位的坐标原点HTML,css固定定位_CSS绝对定位固定定位详解
摘要腾兴网为您分享:CSS绝对定位固定定位详解,智学网,鱼乐贝贝,优酷,瑞易生活等软件知识,以及安卓微信多开,特效视频,微贷网app,勿忘我3dm,有为学堂,火力牛,手机知网,移动小秘书,快学堂,p ...