CSS-定位
前言
关于布局与定位是Web前端开发里非常基础而又重要的部分。虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有时候很令人苦恼。下面根据我的学习和编程经验梳理一下定位的相关知识。
提示:以下是本篇文章正文内容,下面案例可供参考
一、定位是什么?
html传统布局的方式:普通流、浮动、定位。
定位含义:将盒子定在某个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位的组成:定位模式(元素在文档中的定位方式)+边偏移(决定了该元素的最终位置)
二、定位的组成(定位模式+边偏移)
1.定位模式
含义:元素在文档中的定位方式
Synatax:
/* 静态定位 */
position: static;
/* 相对定位 */
position: relative;
/* 绝对定位 */
position: absolute;
/* 固定定位 */
position: fixed;
/* 粘性定位 */
position: sticky;
属性值:static | relative | absolute | fixed | sticky
1、static
语法: 选择器 { position :static; }
位置:静态定位按照标准流摆放位置,它没有偏移量
2、relative
语法: 选择器 { position :relative; }
位置:是元素在移动位置时候,是相对于它原来的位置来说的
特点:
- 移动后, 不脱标,它的位置是保留的。
3、absolute
位置: 是元素在移动位置的时候,是相对于它祖先元素来说的
语法: 选择器 {position: absolute;}
特点:
- 如果没有祖先元素或者父元素没有定位,则以浏览器定位wei
- 如果祖父元素有定位(相对、绝对、固定定位),则以最近一级的带有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置(脱标)
4、 fixed
位置:固定定位是元素固定于浏览器可视区的位置。
主要使用场景:可以在浏览器页面滚动时元素的位置不变
语法: 选择器 { position : fixed ;}
特点:
- 以浏览器的可视窗口为参照点移动元素,跟父元素没有任何元素,不随滚动条滚动
- 固定定位不占用原先的位置,也是脱标的,也是一种特殊的绝对定位
5、sticky
是相对定位和固定定位的混合
特点:
- 以浏览器的可视窗口为参照点移动元素
- 粘性定位占有原先的位置
- 必须有top、left、right、bottom 其中的一个才有效
举例:relative
HTML 代码如下(示例):
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
CSS 代码如下(实例):
* {
box-sizing: border-box;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: relative;
top: 20px;
left: 20px;
background: blue;
}
结果展示
2.边偏移
含义:定位的盒子最终的位置
属性值:top bottom left right
三.叠放次序z-index
选择器{ z-index: n;} 在使用定位布局时,可能会出现盒子重叠的情况,此时,可以使用z-index来控制盒子的前后次序 (z轴),n可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上注意:n后面不能加单位、只有定位的盒子才有z-index属性、n相同,则按照书写顺序、后来者居上
四.定位总结
注意
1、加了绝对定位的盒子不能通过margin:0 auto 水平居中
2、行内元素添加绝对或固定定位,可以直接设置高度和宽度
3、块级元素添加绝对或者固定定位,如果不给高度或者宽度,默认大小是内容的大小。
4、脱标的盒子不会触发外边距塌陷 浮动元素、绝对定位或固定元素的都不会触发外边距合并的问题
5、浮动元素和定位元素的区别:
1)、 绝对定位或固定定位会完全压住盒子,包含里面的文字
2)、 浮动元素不同,只会压住它占据它位置的盒子,但是不会压住下面标准流盒子里面的文字和图片
6、边偏移需要和定位模式联合使用,单独使用无效;top 和 bottom 不要同时使用;left 和 right 不要同时使用。
五.网页布局总结
一个完整的网页,有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
1). 标准流
可以让盒子上下排列 或者 左右排列的
2). 浮动
可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
3). 定位
定位最大的特点是有层叠的概念,就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。