怎样明白position属性值及其特性【css教程】,position

怎样明白position属性值及其特性【css教程】,position

position定位属性有四个属性值分别为static默许值示意没有定位,relative相对定位是相对于自身举行定位,absolute相对定位是相对于有定位的父元素举行定位,fixed牢固定位相对于浏览器窗口定位

本日将要引见的是CSS中的定位属性position的各个属性值及其特征,具有肯定的参考作用,愿望对人人进修定位有所协助

【引荐课程:CSS教程】

position属性

position 属性就是用来划定元素的定位范例,即把元素安排到一个静态的、相对的、相对的、或牢固的位置中。因此在position属性中它有四个属性值分别为:static、relative、absolute、fixed。接下来在文章中将细致引见这四个属性值的用法及特征。

static属性值

static属性示意默许值,即没有定位,元素出现在平常的流中。疏忽了 top, bottom, left, right 或许 z-index 声明

<style>
div{
	width:100px;
	height:100px;
	border:10px solid #ccc;
}
div.static {
    position: static;
    border: 10px solid pink;
}
</style>
</head>
<body>
	<div></div>
	<div class="static">运用了 position: static;</div>
</body>

效果图:

relative属性值

示意相对定位的元素,能够经由过程top,bottom,left,right的设置相对于其平常(本来自身)位置举行定位。它是默许参照父级的原始点为原始点来定位的,若无父元素则按照上一个元素的底部为原始点举行定位。

1、相对定位不会影响元素自身特征

2、 不会使元素离开文档流(元素底本位置会被保存)

3、没有定位偏移量时对元素无影响

4、提拔层级,能够运用z-index来转变一个定位元素的层级关联,从而转变元素的掩盖关联,值越大越在上面

div{
	width:200px;
	height:200px;
	background-color: pink;

}
div.relative {
    position: relative;
   background-color:lightblue;
   left:45px;
}
</style>
</head>
<body>
	<div>父元素
	<div class="relative">子元素</div>
	</div>
</body>

效果图:

absolute属性值

示意相对定位的元素,相对于 static 定位之外的第一个父元素举行定位。它的特征有以下几个方面

1、 使元素完整离开文档流,即在文档流中不再占位

2、能够转变内联元素的特征,即在内联元素中能够设置宽高

3、使区块元素在未设置宽度时由内容撑开宽度

4、 相对于近来一个有定位的父元素偏移,若其父元素没有定位则逐层上找,直到找到body为止。

5、相对定位平常合营相对定位运用(子绝父相)

<style>
div{
	width:200px;
	height:200px;
	background-color: pink;

}
div.absolute {
    position:absolute;
   background-color:lightblue;
   left:145px;
   top:140px;
}
</style>
</head>
<body>
	<div>父元素
	<div class="absolute">子元素</div>
	</div>

效果图:

fixed属性值

示意牢固属性值,生成相对定位元素,相对于浏览器窗口举行定位。就是不管你怎样转动转动条,元素依旧在谁人位置不动

<style>
body{height: 2000px;}
div.fixed {
	width:200px;
	height:200px;
    position:fixed;
   background-color:lightblue;
   left:145px;
   top:140px;
}
</style>
</head>
<body>
	<div class="fixed">牢固元素</div>
</body>

效果图:

总结:以上就是本篇文章的全部内容了,愿望对人人有所协助。

以上就是怎样明白position属性值及其特征的细致内容,更多请关注ki4网别的相干文章!

分享到 :