- _nosay
CSS 定位学习记录
2018-05-04 13:58:11
块级元素和内联元素之间的区别
- 块元素总是独占一行的
- 内联元素总是和相领的内联元素处于同一行的,只有当宽度被占满时,才会另起一行
块级元素
- div
- h1~h6
- table
- ol、ul、li
- p
- ...
内联元素
- a
- span
- img
- input
- ...
假如有如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test {
width: 100px;
height: 100px;
background: red;
border: 1px solid #FFF;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>
因为div是块元素,所以每个div独占一行,具体表现形式为:
这就是标准流中的块元素的显示方式。
如果我们加上内联样式,使其变为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test {
width: 100px;
height: 100px;
background: red;
border: 1px solid #FFF;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<span>now you can see me1</span>
<span>now you can see me2</span>
<span>now you can see me3</span>
<span>now you can see me4</span>
</body>
</html>
具体表现形式为
我们很明显的看到两种方式表现形式的不同,以及基本的特性。这就是传统的标准流。
除了标准流以外,还有两种布局方式,分别为
- 浮动
- 定位
position 属性的意义
- position 属性决定了元素将如何定位
- 通过top,right,bottom,left实现位置
position 中的可选参数
- static
- relative
- absolute
- fixed
- inherit
static
为默认值,元素按照标准流的方式进行正常排列
relative
相对定位,使用后元素仍然处于正常的文档流中,但是我们可以通过left,top,right,bottom来改变元素的位置,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1 {
width: 100px;
height: 100px;
background: red;
position: relative;
left: 0;
top: 100px;
}
.div2 {
width: 100px;
height: 100px;
background: blue;
position: relative;
left: 0;
top: -50px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
具体展现效果如下
此时先在top为100px的地方,建立长宽均为100px的红色区块。值得注意的是,如果我们拿掉 .div1
中的 position: relative; 后,发现指定的top:100px,已经失效了。
这是因为position的默认值为static,元素按照标准流的方式进行正常排列的,声明的left,top,bottom,以及right失效了。
接着,我们声明的 .div2
会相对于 .div1
top -50px的位置,开始创建一个长宽均为100px的元素,最终展示了上图所示的效果。
absolute
使用了 absolute 的元素配合 top,bootom,right,left等位置属性,元素将会脱离正常的文档流,在整个网页中都是可以移动定位的,并且脱离了层级的概念,并且后写的元素将会覆盖先写的元素。
测试代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.test {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
.bro {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="bro"></div>
<div class="test"></div>
</body>
</html>
展示效果如图所示
我们很清楚的看到,红色位于蓝色的下方。也就是说如果一个div中有个absolute属性元素,没有left或是top值,就会像一个普通的inline-block属性元素在这个div里面,但是一旦设置了left:0;top:0,这个absolute元素就会直接从DOM脱离,独立于文档流,结果相对于最近的relative属性的祖先标签定位(如果没有,就body定位)。
我们给.test加下 left:0;或 top:0; 显示结果如图所示
可以看到,红色脱离了当前的文档流,并且将蓝色的区域覆盖掉了。
fixed
固定定位,即使用了fixed参数的元素,配合top,left,right,bootom等位置属性,元素会脱离正常的文档流,不受制于标准流的约束。
此元素使用和absolute很是相似,学习它只需要掌握和absolute的区别就可以了,看下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.test {
width: 100px;
height: 100px;
background: red;
position: absolute;
top:0;
left:0;
}
.per {
width: 300px;
height: 300px;
background: blue;
margin-left: 200px;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
</div>
</body>
</html>
最终展现效果如下
看到红色已经彻底脱离了其父级.per的控制,此时 absolute 和 fixed 效果是一模一样的。但是如果父级声明一下position属性,只要不使用默认值 static,代码即更改为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.test {
width: 100px;
height: 100px;
background: red;
position: absolute;
top:0;
left:0;
}
.per {
width: 300px;
height: 300px;
background: blue;
position: fixed;
margin-left: 200px;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
</div>
</body>
</html>
最终效果如图所示
可以看到,absolute 还是受制于 声明 position(非static)的父级元素的,而 fixed 则不受此限制,完全无视父级的声明,直接脱离。非常适合做那些万恶的广告层.
inherit
继承父元素的position 的值, 继承父元素的定位方式
z-index
- 可以设置元素的叠加顺序,但依赖定位属性
- z-index 大的元素会覆盖掉 z-index 小的元素
- z-index 为auto的元素不参与层级比较
- z-index 为负值,元素被普通流中的元素覆盖