CSS元素定位
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- 定位(position)属性:规定元素的定位类型
可选值:relative:相对定位
absolute:绝对定位
fixed:绝对定位
static:无定位
定位的开启:position的值为static以外的值时,定位开启
定位的偏移量值为:left right top bottom
相对定位:position:relative
1、开启相对定位,不设置相对偏移量,在界面中不发生变化。
2、设置相对定位的偏移量可选值:left :相对于原本定位位置,向左偏移
right :相对于原本定位位置,向右偏移
top :相对于原本定位位置,向上偏移
bottom :相对于原本定位位置,向下偏移
设置的值,可理解为,在一个坐标系里面,从(0,0)点(表示原本自身位置为起点)到其他坐标的变化
比如left:200px,理解为(200,0)进行了平面移动。
3、相对定位不会脱离文档流,保留原本的位置大小。
4、不会改变元素的类型,块还是块,内联还是内联
绝对定位:position:absolute
特点:1、脱离文档流
2、不更改设置,不发生变化
3、相对于它最近的祖先元素开启定位,进行定位的,如果所有祖先元素没有开启定位,则相对于浏览器窗口进行定位
4、改变元素性质,内联元素变成块元素
5、提升一个层级
6、一般给父元素开始相对定位一起使用
开启固定定位position:fixed
特定:1、大部分特点与绝对定位一样
2、永远相对浏览器窗口进行定位
3、固定在浏览器窗口的某个位置,不会随滚动条改变(小广告等)
开启粘性定位position:sticky
特点:在页面正常显示时,相当于开启的relative定位,无变化,但是,当滚动条滚动,移出当前内容时,被开启元素像
fixed定位一样固定在页面某处,需要有触发条件(left、right、top)
开启浮动float(横向布局使用)
设置元素的浮动,脱离文档流
可选值:left、right、none
清除浮动:clear:both
设置元素层级z-index:值
使元素居中对齐可使用margin:
-->
-->
<script src="" async defer></script>
</body>
</html>