css布局-----定位
1、为什么需要定位？
- 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
- 滚动窗口时，盒子固定在某个位置
2、应用
- 下拉菜单、模态框、web应用程序的一些基本效果
3、本质
将元素彻底从文档流中移走。允许将元素放在屏幕的任意位 置，还可以将一个元素放到另一个元素的前面或者后面，彼此重叠。（按照定位的方式摆放盒子）
4、定位组成
定位=定位模式+边偏移
- 边偏移
定位盒子移动的最终效果
4个值：
top：顶端偏移量，定义元素相对于其父元素上边线的距离
bottom：底部偏移量，定义元素相对于其父元素下边线的距离
left：左侧偏移量，定义元素相对于其父元素左边线的距离
right：右侧偏移量，定义元素相对于其父元素右边线的距离
-
定位模式
决定元素的定位方式，通过position属性设置
position：key;
其中，key有5个值：
1、static----静态定位
position属性的初始值，元素使用静态定位，意味将这个元素定位在标准流中。
2、relative----相对定位
特点：
1）、相对于它原来的位置移动。
2）、继续占有原来在标准流中的位置，后面的盒子以标准流的方式对待他。应用：作为绝对定位元素的父元素
例子：
<style>
.one{
/* 相对定位 */
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: aquamarine;
}
.two{
width: 100px;
height: 100px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
截图：
3、absolute—绝对定位
特点：
1）、相对于祖先元素移动
2）、如果没有祖先元素或祖先元素没有定位，以浏览器为准定位（Document文档）
例子1：没有父元素的情况
/*没有父元素的情况*/
<style>
div{
position: absolute;
top: 10px;
right: 10px;
width: 100px;
height: 100px;
background-color: tomato;
}
</style>
</head>
<body>
<div></div>
</body>
例子2、有父元素但没定位
<style>
/* 有父元素但没定位 */
.father{
width: 100px;
height: 100px;
background-color: aquamarine;
}
.son{
position: absolute;
top: 10px;
right: 10px;
width: 100px;
height: 100px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
截图：
3）、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
例1：有父元素有定位
<style>
/* 有父元素有定位 */
.father{
position: relative;
width: 300px;
height: 300px;
background-color: aquamarine;
}
.son{
position: absolute;
top: 40px;
right: 10px;
width: 100px;
height: 100px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
例2、父亲无定位，爷爷有定位
<style>
.grandfather{
position: relative;
width: 600px;
height: 600px;
background-color: thistle;
}
/* 有父元素无定位 */
.father{
width: 300px;
height: 300px;
background-color: aquamarine;
}
.son{
position: absolute;
top: 40px;
right: 10px;
width: 100px;
height: 100px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
截图：
4）、绝对定位不再占有原先位置
-
子绝父相*
含义：子级绝对定位，父级相对定位（相对定位经常用来作为绝对定位的父级） 原因： 1）、子级绝对定位，不会占有位置可以放到父盒子中任意一个位置，不会影响其他的兄弟盒子 2）、父盒子需要加定位限制子盒子在父盒子内部显示 3）、父盒子布局时，需要占有位置，因此父亲只能是相对定位 总结：因为父级需要占有位置，所以相对定位，子盒子不需要占有位置，绝对定位
4、fixed—固定定位
应用：
1)、 固定于浏览器可视区的位置。主要使用场景：浏览器页面滚动时元素的位置不会改变。
2）、创建模态框
特点：
1）、以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动
2）、不再占有原先的位置
可以看成特殊的绝对定位
固定定位小技巧：固定在版心两侧位置
1）、让固定定位盒子left：50%，走到浏览器可视区域一半位置
2）、让固定定位盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置
例子：
<style>
.w{
width: 800px;
height: 800px;
background-color: thistle;
margin:0 auto;
}
.fixed{
position: fixed;
left: 50%;
margin-left: 400px;
width: 50px;
height: 150px;
background-color:salmon;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心像素800px</div>
</body>
5、sticky—粘滞定位
特点：
1）、以浏览器的可视窗口为参照点移动元素（固定定位特点）
2）、粘性定位占有原先的位置（相对定位特点）
3）、必须添加top、left、right、bottom其中一个才有效
定位总结
| 定位模式 | 是否脱标 | 移动位置 |
|---|---|---|
| static静态定位 | 否 | 不能使用边偏移 |
| relative相对定位 | 否（占有位置） | 相对于自身位置偏移 |
| absolute绝对定位 | 是（不占有位置） | 带定位的父级 |
| fixed固定定位 | 是（不占有位置） | 浏览器可视区 |
补充
1、定位的叠放顺序
使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index控制盒子前后次序（z轴）
语法：{z-index：value；}
1）、 value可以是正负数或0，默认是auto，数值越大，盒子越靠上
2）、属性值相同，按照书写顺序，从上往下依次执行
3）、value后不能加单位
4）、只有定位的盒子才有此属性
2、绝对定位的盒子居中算法
加了定位的盒子不可以使用margin：0 auto；进行居中，但有以下方法：
1）、left：50%；---->盒子左侧移动到父级元素的水平中心位置
margin-left：-value px;---->盒子向左移动自身宽度的一半
3、定位的特殊属性
float：其他盒子会无视当前元素，从浏览器左上角开始布局，而盒子内的文本依旧会为浮动的元素让出位置
绝对定位：其他盒子与盒子内的文本都会无视当前元素，从左上角开始布局
========================================
声明：不是真正意义上的原创，只是学习笔记，内容来自各大资料！
1195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
