CSS定位
阅读 (383)CSS三个大核心模块:盒模型 、浮动和定位,其余的都是细节。
为什么要用定位?
举例。。。
元素的定位主要包括偏移属性和定位模式来实现。
一、偏移属性
-
说明
用来描述定位元素各边相对于其包含块的偏移量。
偏移属性 说明 top 顶部偏移量,元素相对于其父元素上边线的距离 right 右侧偏移量,元素相对于其父元素右边线的距离 bottom 底部偏移量,元素相对于其父元素下边线的距离 left 左侧偏移量,元素相对于其父元素左边线的距离
二、定位模式
-
说明
在CSS中,position属性用于定义元素的定位模式
-
语法
选择器{position:属性值;}
-
属性值
值 描述 static 自动定位(默认定位方式) relative 相对定位,相对于其原文档流的位置进行定位 absolute 绝对定位,相对于其上一个已经定位的父元素进行定位 fixed 固定定位,相对于浏览器窗口进行定位
三、静态定位
-
说明
是所有元素在HTML文档流中的默认定位方式。即网页中所有元素都默认的是静态定位, 也就是标准流的特性。 -
语法
{position:static;}
-
注意
在静态定位模式,无法通偏移属性(top、bottom、left或right)来改变元素的位置。
-
PS:设置跟不设置其实一个样儿!
四、相对定位(自恋型)
-
说明
是将元素相对于它在标准流中的位置进行定位,通过设置边偏移属性(left、top、right、bottom值)可将其移至相对于**它自己原来的位置**的定位,不会破坏正常的布局流,它在文档流中的位置仍然保留。
-
语法
{position:relative;}
-
效果
div{
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid red;
}
div:nth-child(2){
position: relative;
top: 50px;
left: 200px;
}
-
注意
-
相对定位是相对于自己来移动位置,以自己的左上角为基点移动。
-
相对定位不脱标,盒子仍在标准流中,且原来的的位置继续占有(人走了,位置还占着)
-
五、绝对定位(拼爹型)
-
说明
相对于父级元素的绝对定位,浮出、脱离文档流不占据空间(俗称:脱标),就是我们所说的层,其位置相对于最近的已定位父元素而言的位置,若父级都没有定位,则以html(根元素)可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。
-
语法
{position:absolute }
-
注意
完全脱标,完全不占位置
父级没有定位
-
说明
若所有父元素都没有定位,以浏览器为准对齐(html文档)。
<style> #box1{ width: 300px; height: 200px; background-color: orange; border: 1px solid yellowgreen; } #box2{ width: 100px; height: 100px; background-color: pink; border: 1px solid red; position: absolute; left: 400px; } </style> <div id='box1'> <div id='box2'>我是子盒子,父亲没定位</div> </div>
父级有定位
-
说明
绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
-
示例
<style> #box1{ width: 300px; height: 200px; background-color: orange; border: 1px solid yellowgreen; position: relative; margin: 0 auto; } #box2{ width: 100px; height: 100px; background-color: pink; border: 1px solid red; position: absolute; left: 400px; top: 30px; } </style> <div id='box1'> <div id='box2'>我是子盒子,父亲有定位</div> </div>
子绝父相
-
说明
绝对定位是将子元素依据最近的已经定位(绝对、固定或相对定位)的非静态父元素进行定位。但是我们习惯是,如果子元素是绝对定位, 那么就把父元素设置成相对定位。
-
解释
因为子元素绝对定位后,完全脱标,不占有位置, 因此可以放到父盒子里面的任何一个地方。而父盒子布局时,最好是占有位置,因此父亲只能是相对定位。
绝对定位实现盒子水平垂直居中
-
说明
普通的盒子是左右margin 改为 auto就可, 但是对于绝对定位就无效了。
-
绝对定位的盒子也可以水平或者垂直居中
-
设置left或者top为50%,父盒子宽高的一半
-
再设置子盒子左外边距或者上外边距为负的一半
-
```html
<style>
#box1 {
width: 600px;
height: 400px;
background-color:orange;
border: 1px solid yellowgreen;
margin: 0 auto;
position:relative;
}
#box2{
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid red;
position:absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -50px;
}
</style>
<div id='box1'>
<div id="box2">
</div>
</div>
```
六、固定定位(认死理型)
-
说明
相对浏览器的绝对定位,是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不管浏览器滚动条如何滚动,浏览器窗口的大小如何变化,该元素都会始终显示在浏览器窗口的固定位置。
-
语法
{position:fixed;}
-
关键点
- 固定定位的元素跟父元素没有任何关系,只认浏览器。
- 固定定位完全脱标,不占有位置,不随着滚动条滚动。
- 固定定位的盒子一定要写宽和高,除非内容撑开可不写。
七、定位元素的层叠(z-index)
-
说明
检索或设置对象的层叠顺序。即 当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。
-
语法
{z-index : auto |number}
auto:默认值
number:无单位的整数值,取值可为正整数、负整数和0
没设置z-index时,按书写顺序,后写的盒子显示在上层;设置z-index后,数值越大,层越靠上;
<style> div { width: 100px; height: 100px; position: absolute; } div:first-child { background-color: orange; border: 1px solid yellowgreen; /* z-index: 2; */ } div:nth-child(2) { background-color: pink; border: 1px solid red; z-index: 1; margin: 40px; } div:last-child { background-color: yellow; border: 1px solid blue; margin: 20px; } </style> <div>box1</div> <div>box2</div> <div>box3</div>
- 注意
- 属性值后面无单位
- z-index的默认值是0,大值覆盖小值
- 取值相同,按书写顺序后写者居上
- 仅相对定位、绝对定位、固定定位有此属性,其余标准流,浮动,静态定位都无此属性。
八、定位模式转换
-
说明
和浮动一样, 块级元素或者行内元素添加了绝对定位和固定定位之后, 元素模式也会发生转换, 都转换为行内块模式,可直接设置宽度和高度。
<style> div{ height: 200px; background-color: pink; /* position: absolute; */ } span{ width: 100px; height: 100px; background-color: red; /* position: absolute; */ } </style> <div>定位模式转换</div> <span>行内元素</span>
九、四种定位总结
定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
---|---|---|---|
静态static | 不脱标,正常模式 | 不可以 | 正常模式 |
相对定位relative | 不脱标,占有位置 | 可以 | 相对自身位置移动(自恋型) |
绝对定位absolute | 完全脱标,不占有位置 | 可以 | 相对于定位父级移动位置(拼爹型) |
固定定位fixed | 完全脱标,不占有位置 | 可以 | 相对于浏览器移动位置(认死理型) |