nth-child(n)
在style中设置,设置括号里面,
(n+6)表示从第六个开始
(odd)奇数
(even)偶数
:nth-child(n+2):nth-child(-n+9) 从第2个到第9个
定位
- 某个元素可以自在在盒子移动位置,并且压住其它盒子
- 滚动窗口时,盒子时固定屏幕某个位置的
浮动让多个块级盒子一行没有缝隙
定位组成
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置
1、定位模式
通过position属性来设置
2、边偏移
定位的盒子移动到最终位置,有top/bottom/left/right
4个属性。
静态定位static(了解)
选择器 {position:static;}
按照标准流特性摆放位置,没有边偏移
相对定位relative(重要)
position : relative;
相对于原来位置来说
top:100px;相对于原来位置往下移100像素/距离上方100px
left: 80px;相对于原来位置向右移动80PX
移动后,原来位置继续占有,后面盒子仍然以标准流对待
绝对定位absolute(重要)
是相对于它祖先元素{position:absolute;}
特点:
- 没有祖先元素或者祖先元素没定位,以浏览器为准
- 以最近一级带有定位祖先元素的为参考移动位置
- 绝对定位不再占有原来位置
子绝父相
浮动只会影响后面的盒子,浮动很难布局位置
对父级元素同时加浮动和定位都没问题
固定定位fixed
元素固定浏览可视区的位置
语法{position:fixed;}
以浏览器可视窗口为参照点移动元素
. 跟父元素没有任何关系
. 不占有原先位置
固定定位小技巧:固定在版心右侧位置
. 走浏览器宽度的一半
. 走版心的一半
left: 50%;
margin-left: 450px;
粘性定位
相对定位和绝对定位的混合
语法{position:sticky;top:10px;}
- 以浏览器可视窗口为参照点移动元素(固定定位)
- 占有原先的位置(相对定位)
- 必须添加top/left/right/bottom其中一个才有效
<style>
body {
height: 2300px;
}
.nav {
position: sticky;
top: 10px;
/* 距离可视区上端10px时不再移动位置 */
margin: 200px auto;
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="nav">daohang</div>
</body>
nth-child(n)
在style中设置,设置括号里面,
(n+6)表示从第六个开始
(odd)奇数
(even)偶数
:nth-child(n+2):nth-child(-n+9) 从第2个到第9个
定位叠放次序z-index
z轴,z-index属性的值越大(不加单位),元素的层级越高,发生重叠时,层级高的元素会覆盖在层级低的元素的上面
规则:
- 只有定位才有z-index属性
- 父元素设置了z-index属性时,子元素的z-index属性只于同级元素和父级元素做比较时才有意义,与其它元素比无意义
- 父元素未设置z-index属性,子元素的z-index属性与父元素外的所有外部元素对比,都以元素本身的in-dex属性值为准进行对比
属性值:
auto(默认值):与父级元素层级相等、number:整数值,数值越大,层级越高、inherit:继承父元素的z-index的属性值
使用范围
z-index 属性只有在设置; position:relative|absolute|fixed
的元素和父元素设置了display:flex
属性的子元素中起作用
使用场景
1、同级元素之间
(属性值比较,然后书写顺序)
- z-index属性值大,显示在前面
- 属性值相等,按照书写顺序
- 一个设置,一个未设置,未设置的index默认为0,再进行比较
2、父子元素之间
- 父元素未设置z-index时,子元素设置了z-index属性
子元素属性>=0,子元素高于父元素层级
<0时,子元素低于父元素层级 - 父元素设置了z-index属性值,子元素未设置z-index属性
子元素层级永远高于父元素 - 父元素设置了z-index属性值,子元素也设置了z-index属性
同2(只要父元素设置了,子元素总是比父元素层级高)
3、子元素与其它父元素外的其它元素
- 父元素未设置z-index属性,子元素z-index属性值与父元素的同级元素z-index属性值进行对比。直接父元素和子元素分别和另外一个父元素比较
- 父元素设置了z-index属性,和另外一个父级元素比较,通通以父元素为主进行比较。
- 父级元素的子元素和另外父级元素的子元素。同样遵循上面的准则。
父级均为设置:子元素与父元素进行比较,再将第一次比较重层级低的进行比较,然后将高的进行比较,最后再将第二次比较中层级高的与第三次比较中层级低的进行比较(父与子,父与子,然后分开分别比较)
父级均设置了z-index属性,子元素属性只有与同级元素和父级元素作比较时才有意义。此时子元素与父元素外的所有外部比较,都以父亲为主
一个父级设置了z-index,一个父级未设置。和上面结合比较(父元素有的,父元素代替比较,没有的自己比较)
拓展
1. 绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto;水平居中
left:50%
margin-left:盒子宽度的50%(负值),实现了水平居中
<style>
.nav {
position: absolute;
/* 水平居中 */
left:50%;
margin-left:-100px;
/* 垂直居中 */
top: 50%;
margin-top:-50px;
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="nav">daohang</div>
</body>
定位的特殊性
绝对定位和固定定位类似
- 行内元素添加绝对或者固定定位,可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小就是内容的大小
- 脱标盒子不会触发外边距塌陷:浮动元素、绝对定位、固定定位都不会触发
<style>
span {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
div {
position: absolute;
background-color: blue;
}
</style>
</head>
<body>
<span></span>
<div>123</div>
</body>
4. 绝对定位(固定定位)会完全压住盒子
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)
<style>
div {
float: left;
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<span>123iidzhgefeurfaeoihfsdhnv</span>
</body>
div {
position:absolute;
width: 100px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<span>123iidzhgefeurfaeoihfsdhnv</span>
</body>
浮动原先目的就是环绕图片