定位
为什么需要定位？
以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。
定位组成
定位=定位模式+边偏移（定位盒子移到的最终位置，由top，bottom，left，right组成）。
定位模式
定位模式决定元素的定位方式，它通过css的position属性来设置，其值可以分为四个：
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
1.静态定位static
静态定位是元素的默认定位方式，无定位的意思。
语法：选择器{
position：static;
}
- 静态定位在布局中很少用到，没有脱离标准流，它没有边偏移。
- 静态定位在布局时很少用到。
2.相对定位relative
相对定位是在元素移动位置的时候，是相对于它原来的位置来说的，而非浏览器。
语法：选择器{
position：relative;
}
特点：
1.它是相对原来的位置来移动的（移动的位置是参照自己原来的位置）。
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）。
3.绝对定位absolute
绝对定位是在元素移动位置的时候，是相对于父级元素来说的。
语法：选择器{
position：absolute；
}
特点：
1.如果没有父级元素或者父级元素没有定位，则以浏览器为准定位（Document文档）。
2.如果父级元素有定位（相对、绝对、固定），则以最近一级的有定位元素作为参考点移动位置。
3.绝对定位不占有原先的位置。
这是由于父类没有使用相对定位，子类相对于浏览器进行定位。
就如同这个图，2是1的最近一级，但是如果2没有定位，那么1只能参考3的标准。
子绝父相的由来
子级是绝对位置的话，父级要使用相对定位。
1.子级绝对定位，不会占有位置，可以放到父盒子里面的任意一个地方，不会影响其他的兄弟盒子。
2.父盒子需要加定位限制子盒子在父盒子内部显示。、
使用子绝父相来定位hot标签。
.box-bd ul li > img{
width: 100%;
}
.box-bd ul li em{
position:absolute;
top:0;
right: -10px;
}
-
java web Spring底层原理，大佬带你飞
高级● 10000人在学习
4.固定定位
固定定位是元素固定于浏览器可视区的位置，主要使用场景，可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器{
position：fixed；
}
注：不要直接控制图片，而是使用盒子控制图片。
特点：1.以浏览器的可视窗口参照点移动元素。
使用固定定位将右侧电话栏定位，好多时候官网的布局就如同这样。
.w{
height: 1400px;
width: 800px;
background-color: pink;
margin:0 auto;
}
.fixed{
position: fixed;
left: 50%;
/*版心的一半*/
margin-top: 100px;
margin-left: 400px;
height: 150px;
width: 50px;
background-color: aqua;
}
5.粘性定位
粘性定位被认为是相对定位和固定定位的组合
语法：
选择器{
position：sticky；
top：10px；
}
特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位的特点）。
2.粘性定位占有原先的位置（相对定位的特点）。
3.必须添加top，bottom，left，right四个边偏移的其中一个。
总结：
定位模式
是否脱标
移动位置
是否常用
relative相对定位
否（占有位置）
相对于自身位置的移动
常用
absolute绝对定位
是（不占有位置）
带有定位的父级
常用
fixed固定定位
是（不占有位置）
浏览器可视区
常用
static静态定位
否
不能使用边偏移
很少
sticky粘性定位
否（占有位置）
浏览器可视区
当前阶段很少
定位的叠放次序
可以使用z-index来控制盒子的前后次序（z轴）。
选择器{
z-index：1；
}
这个是有次序的，例如定义三个盒子，按照标准流的方式排放，但是给它加了固定定位以后，会有后来居上的作用。
加了定位以后，第三个压住了第一和第二。
或者可以使用z-index来调整优先级，数值越大越靠上面。
定位的特殊性
- 绝对定位和相对定位也和浮动类似。
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
- 脱标的盒子不会触发外边距塌陷。
- 绝对定位（固定定位）会压住下面标准流所有的盒子，但是不会压住其中的文字。（浮动最早是处理文字的环绕）。
总结：这是定位的一些简单知识，由于自己很难记住这些东西，所以通过笔记来使得自己能够更好的理解和记忆，不对的地方还是希望大家指正和批评。
©著作权归作者所有,转载或内容合作请联系作者
-
人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 209,400评论 6赞 487
-
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 89,416评论 2赞 382
-
救了他两次的神仙让他今天三更去死
文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 155,207评论 0赞 345
-
道士缉凶录：失踪的卖姜人
文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
开封第一讲书人阅读 55,931评论 1赞 281
-
港岛之恋（遗憾婚礼）
正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,970评论 5赞 378
-
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,497评论 1赞 287
-
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
沈念sama阅读 38,710评论 3赞 403
-
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,414评论 0赞 262
-
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,869评论 1赞 301
-
护林员之死
正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
茶点故事阅读 36,293评论 2赞 325
-
白月光启示录
正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,384评论 1赞 337
-
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,056评论 4赞 328
-
日本核电站爆炸内幕
正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,591评论 3赞 310
-
男人毒药：我在死后第九天来索命
文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,574评论 0赞 20
-
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
开封第一讲书人阅读 31,807评论 1赞 261
-
情欲美人皮
我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
沈念sama阅读 45,999评论 2赞 357
-
代替公主和亲
正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,225评论 2赞 347
推荐阅读更多精彩内容
-
HTML5—CSS学习
CSS可以分为4部分 1. CSS样式 1. 文字属性 格式：非连写---> font-family：设置文字的字...
白的吓人阅读 693评论 0赞 0
-
No.13 CSS标准流、浮动、定位
一、标准流（普通流/文档流） 所谓的标准流: 就是标签按照规定好默认方式排列. 块级元素会独占一行，从上向下顺序排...
testleaf阅读 2,382评论 1赞 7
-
CSS 第 五天 —— 浮动定位
写定位的时候如果不给定位，可以设置left：0、top:0; 一、定位 如果页面出现错误，出现很多margin（...
风来_阅读 238评论 0赞 0
-
CSS：定位（position）
学习目标 理解能说出为什么要用定位能说出定位的 4 种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局...
jovelin阅读 1,405评论 0赞 0
-
小白前端09-定位/元素隐藏/CSS技巧
1.定位 1.1 定位基础 需要定位的原因：1.当需要某个元素自由的在盒子内移动位置，并且压住其他盒子时。2.当滚...
OohMuYi阅读 594评论 0赞 0
【信息由网络或者个人提供，如有涉及版权请联系COOY资源网邮箱处理】
暂无评论内容