【CSS】定位

普通文档流?浮动也会让元素脱离文档流,如果不设置浮动所有元素都处于普通文档流中。普通文档流中元素框的位置由元素在HTML中的位置决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到,行内元素在一行中水平排列

层级关系默认规则:定位元素会覆盖在普通元素的上面;都设置定位的两个元素,后写的元素会覆盖在先写的元素上面

static ( 默认 )

元素按照代码的顺序,决定每个元素的位置,正常的文档流显示不受top、right、bottom、left、z-index属性的影响

html 复制代码
<style>
	.one{ width: 270px; height: 270px; border: 1px solid red;margin-left: 50px; }
	.two,.three{ width: 100px; height: 100px; }

	.two{ background-color: #145eff; }
	.three{ background-color: #ffec00; }
</style>
<div class="one">
	<div class="two">正常盒子</div>
	<div class="three">正常盒子</div>
</div>

效果:

relative ( 相对定位 )

元素的偏移参考元素本身原来的位置不会使元素脱离文档流。设置了相对定位的元素不管它是否进行移动,元素原本所占空间保留,移动元素会导致它覆盖其它的元素。并且定位元素经常与z-index属性进行层次分级。可通过 left,right,bottom,top改变元素的位置

html 复制代码
<style>
	.one{ width: 270px; height: 270px; border: 1px solid red;margin-left: 50px; }
	.two,.three{ width: 100px; height: 100px; }

	.two{
		background-color: #145eff;
		/* 设置相对定位 */
		position: relative;
		top: 20px;
		left: 70px;
	}
	.three{ background-color: #ffec00; }
</style>
<div class="one">
	<div class="two">relative</div>
	<div class="three">正常盒子</div>
</div>

效果:

absolute ( 绝对定位 )

绝对定位(子绝父相),元素脱离文档流,元素相对于最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,那么相对于文档的body元素进行定位。可以通过设置top、right、bottom、left属性来调整元素的位置。相对于祖先元素进行偏移时,元素原本所占空间不保留。其实它的效果跟浮动是同样的,都会飘起来覆盖页面上的其它元素,可以通过设置z-index属性来控制这些元素的排列顺序。绝对定位和浮动不能一起设置,如果一起设置的话,浮动会失效,以定位为主

html 复制代码
<style>
	.one{
		width: 270px; height: 270px; border: 1px solid red; margin-left: 50px;
		/* 父元素设置相对定位 */
		position: relative;
	}
	.two,.three{ width: 100px; height: 100px; }

	.two{
		background-color: #145eff;
		/* 子元素设置绝对定位 */
		position: absolute;
		top: 50px;
		left: 70px;
	}
	.three{ background-color: #ffec00; }
</style>
<div class="one">
	<div class="two">absolute</div>
	<div class="three">正常盒子</div>
</div>

效果:

fixed ( 固定定位 )

使用 top,left,right,bottom 定位,会脱离正常文档流,不受标准流的约束,并拥有层级的概念。它也是以游览器的四个边角为基准,相对于视口(浏览器窗口)进行偏移,即定位参照的是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。常用于我们在滚动屏幕时仍然需要固定在相同位置的元素

html 复制代码
<style>
	.one{ width: 270px; height: 270px; border: 1px solid red; margin-left: 50px; }
	.two,.three{ width: 100px; height: 100px; }

	body{ height: 2000px; }
	.two{
		background-color: #145eff;
		/* 设置固定定位 */
		position: fixed;
		bottom: 90px;
		right: 50px;
	}
	.three{ background-color: #ffec00; }
</style>
<div class="one">
	<div class="two">fixed</div>
	<div class="three">正常盒子</div>
</div>

效果:

sticky ( 粘性定位 )

它会产生动态效果,很像 relative 和fixed 的结合:一些时候是relative定位(定位基点是自身默认位置),另一些时候自动变成fixed定位(定位基点是视口)。因此,它能够形成"动态固定"的效果,必须设置 top、bottom、left、right 4个值之一否则不产生效果。元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素如果祖先元素都不可以滚动那么就相对于浏览器窗口来计算元素的偏移量。父元素不能设置 overflow:hidden 或者 overflow:auto 属性父元素的高度不能低于 sticky元素的高度

html 复制代码
<style>
	.two,.three,.four,.five,.six,.seven,.eight{ width: 300px; height: 200px;margin-top: 10px; }

	.two{
		background-color: #145eff;
		/* 设置粘性定位 */
		position: sticky;
		top: 0px;
	}
	.three{ background-color: #ffee56; }
	.four{ background-color: #ff96e9; }
	.five{ background-color: #9eff40; }
	.six{ background-color: #62ffe7; }
	.seven{ background-color: #ecff7f; }
	.eight{ background-color: #b6b7b6; }
	.eight{ background-color: #b6b7b6; }
</style>
<div class="seven">正常盒子</div>
<div class="eight">正常盒子</div>
<div class="two">sticky</div>
<div class="three">正常盒子</div>
<div class="four">正常盒子</div>
<div class="five">正常盒子</div>
<div class="six">正常盒子</div>

效果:

相关推荐
江城开朗的豌豆7 分钟前
React 跨级组件通信:避开 Context 的那些坑,我还有更好的选择!
前端·javascript·react.js
吃饺子不吃馅41 分钟前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多1 小时前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
Cosolar1 小时前
前端如何实现VAD说话检测?
前端
CodeSheep1 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅1 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫10 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试