Rumah >hujung hadapan web >tutorial css >css固定定位
css固定定位
- 无忌哥哥asal
- 2018-06-28 17:58:292552semak imbas
定位的四种模式:static,relative,absolute,fixed
定位的四个位置:left,right,top,bottom
定位属性:position,有四种状态值
1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效
2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效
3.absolute:绝对定位,元素相对于它的定位父级定位,脱离文档流,四个位置有效
4.fixed:固定定位,与绝对定位类类似,也脱离了文档流,元素在页面上的位置固定,不随页面滚动,四个位置有效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.固定定位</title>
<style>
body {
/*将页面高度设置为2000px,使之出现垂直滚动条*/
height:2000px;
}
.box {
width: 200px;
height: 260px;
/*background-color: #6CF;*/
/*固定定位fixed:元素脱离文档流,相对于窗口定位,固定在页面上,并且不随页面滚动*/
/*可以当作是绝对定位的一个特例来看待*/
position:fixed;
top: 200px;
left:50px;
}
</style>
</head>
<body>
<!--<div></div>-->
<!--以在线QQ客服为例进行演示-->
<div><img src="../images/qq.png" alt="" width="200"></div>
</body>
</html>Atas ialah kandungan terperinci css固定定位. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn