您的位置：首页 > Web前端 > CSS

CSS定位布局

2018-09-02 12:27 148 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/Alanwlx/article/details/82314409

一、position

css中position的属性有四个值：absolute(绝对)/relative(相对)/fixed(固定)/static(静态_默认)，通过定位属性可以设置自定义布局，使用tlbr(top,left,bottom,right)来调整元素位置。

1. 相对定位和绝对定位（子绝父相）
relative：（相对定位）一般我们会在父级元素中设置position:relative，使其不脱离文本流，从而不会影响该元素当前所在布局。我们也可设置tlbr(top,left,bottom,right)对元素进行偏移，偏移后原有的位置依然被会占据。

absolute：（绝对定位）一般我们会在父级元素中设置position:relative后，在其子级元素中设置position:absolute，使其完全脱离文本流（普通流）。我们可设置tlbr(top,left,bottom,right)让子级元素进行相对于父级元素的偏移，偏移后原有的位置不再占有。（特别：对元素设置了position:absolute后，其父级元素都没有设置position：absolute/relative/fixed则会默认以body为父级，设置的tlbr会相对于body进行偏移。）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS定位布局</title>
<style>
* { margin: 0;  padding: 0;}
.box1{
width: 400px;
height: 400px;
border: 1px solid red;
position: relative;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid blue;
position: absolute;
top: 80px;
left: 40px;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>

效果如下

2.固定定位
fixed：（固定定位） 这里所固定的参照对像是可视窗口而不是body或是父级元素。使用了fixed的元素不会随着窗口的滚动条的滚动而滚动。一般可见于网页侧边导航（淘宝等），网页滚动小广告（较常见的小说网站等），网站客服咨询引导（医疗咨询网站等）。这里不再举例。

3.静态定位
static：（静态定位）一般不会使用，最常用于将position的值从其他值修改成默认。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航