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

CSS 定位

2017-07-13 00:00 169 查看

在css中，如果你要确定一个元素的位置，那么就需要用到定位的属性了，属性名：position。

在css中，定位的方式有：static、fixed、relative、absolute。

（1）static 静态定位（在网页中所有元素默认都是静态定位），即无定位，元素正常出现了流中。

（2）fixed 固定定位，选择该属性值后，元素会固定在网页的某个位置。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>position</title>
<style>
div{
border:solid 1px #aaa;
width:200px;
height:200px;
position: fixed;
top:105px;
left:200px;
background: #000;
}
</style>
</head>
<body>
<div>我是一个盒子,我用的是固定定位</div>
</body>
</html>

效果图：

·

（3）relative 相对定位：元素相对于自身所在位置进行定位，但是并不会影响在其后的元素的位置。

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>relative</title>
<style>
body{
background: #aaa;
}
div{
border:solid 1px #aaa;
width:200px;
height:200px;
position: relative;
top:105px;
left:200px;
background: #000;
color:#fff;
}
div>div{
border:solid 1px #aaa;
width:100px;
height:100px;
position: relative;
top:65px;
left:80px;
background: #ab18ff;
color: #000000;
}
</style>

</head>
<body>
<div>
我是爸爸
<div class="son">
我是儿子
</div>
</div>
</body>
</html>

效果图：

（4）absolute 绝对定位：绝对定位是有参照物的，这个参照物就是父容器，并且父容器要设置相对定位，如果没有设置相对定位，就继续寻找父容器的上一级父容器，以此类推，直到找到设置了相对定位的父元素，若都没有，则以<body>为参照物，元素进行绝对定位后，会影响其后元素的位置。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>position</title>
<style>
div{
border:solid 1px #aaa;
width:200px;
height:200px;
position: relative;
top:105px;
left:200px;
background: #000;
color:#fff;
}
div>div{
border:solid 1px #aaa;
width:100px;
height:100px;
position: absolute;
top:65px;
left:60px;
background: #f76e07;
}
</style>
</head>
<body>

<div>
我是一个盒子,我用的是相对定位定位
<div class="son">
我是一个盒子，我用的是绝对定位
</div>
</div>

</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css定位 HTML基础

相关文章推荐

新的分享

章节导航