提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 怎样明白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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"怎样明白position属性值及其特性【css教程】,position"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线