首页 > 代码库 > css之定位
css之定位
定位--->固定一个位置 (设置水平和垂直的距离)
一:固定定位
固定定位属性:position:fixed;<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
}
.one{
background-color: #288dd1;
position: fixed;
width: 200px;
height: 200px;
left: 200px;
top:200px;
}
.two{
background-color:#ff8500;
left: 300px;
top:300px;
}
</style>
</head>
<body>
<span class="one">uyuyu
</span>
<!--<div class="one"></div>-->
<div class="two"></div>
</body>
</html>
特点 1:不占据原来标准流的位置 2:可以模式转换 3:定位的基准是以浏览器为基准的二:绝对定位
绝对定位属性:position:absolute;<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ height: 200px; width: 200px; } .one{ background-color: #ff8500; position: absolute; left: 300px; top:300px; height: 200px; width: 200px; } .two{ background-color: #288dd1; top: 200px; left: 200px; } </style></head><body><span class="one"></span><!--<div class="one"></div>--><div class="two"></div></body></html>特点1:不占据原来标准流的位置2:可以模式转换3:如果设置了父元素的定位,绝对定位是相对于父元素而言的,否则就是相对于浏览器
三:相对定位
相对定位的属性:position:relative;<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ height: 200px; width: 200px; } .one{ background-color: #288dd1; position: relative; top: 200px; left: 200px; } .two{ background-color: #ff8500; top: 300px; left:300px; } </style></head><body><div class="one"></div><div class="two"></div></body></html>特点1:占据原来在标准流中的位置2:不能模式转换3:定位是相对于标准流的位置而言的
四 :静态定位
静态定位属性:position:static;<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ height: 200px; width: 200px; } .one{ background-color: #ff8500; top: 200px; left: 200px; position: static; } .two{ background-color: #288dd1; top: 200px; left: 200px; } </style></head><body><div class="one"></div><div class="two"></div></body></html>特点1:占据原来的位置2:不能模式转换3:定位怎么设置都没有效果,静态定位就是标准流(默认)
css之定位
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。