理解css之position属性

2021年09月15日 阅读数:1
这篇文章主要向大家介绍理解css之position属性,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

以前css学的一直不精致并且没有细节,为了成为一个完美的前端工做人员,因此决定从新学习css的属性。固然会借鉴MDZ文档(MDZ文档)或其余博主的经验来总结。在这里会注明借鉴或引用文章的出处。侵权即删。css


position属性值包括 static,relative,absolute,fixed,sticky(实验属性)5种。html

1.static

该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时设置 top, right, bottom, left 和 z-index 属性无效前端

   <style>
   	    .parent{
		   background-color: red;
		   width: 100px;
		   height: 100px;
	    }
	    .static{
		   width: 50px;
		   height: 50px;
/*		   position: static;
		   top: 10px;      这段注释代码加与不加没有区别
		   left: 10px;*/
		   background: blue;

	     }
	</style>
	<div class="parent">
      	<div class="static"></div>
    </div>

chrome浏览器运行情况
chrome浏览器运行草图chrome

2.relative

该关键字指定元素 即在不改变页面布局的前提下相对于自身原来位置调整元素位置(原来位置仍然保留)。position: relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效浏览器

<style>
	.parent{
		background-color: red;
		width: 120px;
		height: 120px;
    }
    .one{
		width: 30px;
		height: 30px;
		background: green;

	}
	.two{
		width: 30px;
		height: 30px;
		background: blue;
		position: relative;
		left: 10px;
		top: 10px;
	}
    .three{
		width: 30px;
		height: 30px;
		background: yellow;
	}

</style>
<div class="parent">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

浏览器运行效果以下 相对于原来位置进行移动布局

3.absolute

不为元素预留空间,经过指定元素相对于最近的非 static 定位祖先元素的偏移,来肯定元素位置。绝对定位的元素能够设置外边距(margins),且不会与其余边距合并。 chrome运行草图 此时绿色方块平移,而原来位置再也不保留,其相邻元素填充它原来位置而且是相对于html移动,脱离文档流。学习

假如修改.parent代码添加 position:relative。url

	.parent{
		background-color: red;
		width: 120px;
		height: 120px;
		position: relative;
		/*left:0;*/
		right: 0;
	}

left:0 left:0;(绿色方块覆盖蓝色 ) right:0;right:0;(绿色方块相对于红色方块平移) 这两图说明绿色(.one)相对于父元素移动. 即 相对于 最近的 非 static 定位祖先元素的偏移,来肯定元素位置spa

4.fixed

不为元素预留空间,而是经过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。.net

<style>
    body{
    	height: 2000px;
    	width: : auto;
    }
	.parent{
		background-color: red;
		width: 1360px;
		height: 50px;
		position: fixed;
		bottom: 0;
	}
</style>
<body>
	<div class="parent">
    </div>
</body>

即 在滚动界面时 div.parent 始终 固定页面底部

5.sticky

盒位置根据正常流计算(这称为正常流动中的位置),而后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在全部状况下(即使被定位元素为 table 时),该元素定位均不对后续元素形成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来肯定。position: sticky 对 table 元素的效果与 position: relative 相同 这个不大好演示请你们看文档 sticky效果图 本文同时借鉴了 Wayne Zhu 的文章