CSS的五种定位方式

最新推荐文章于 2024-05-20 20:46:24 发布

小峰子926

最新推荐文章于 2024-05-20 20:46:24 发布

阅读量1.2k

点赞数 5

文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_45317422/article/details/104465058

版权

CSS中一共有五种定位：
position：static；默认值
position：absolute；绝对定位
position：relative；相对对定位
position：fixed；固定定位
position：sticky；粘性定位
其中，粘性定位是CSS3新增加的兼容性比较差

定位的作用：
在正常情况下，可以让一个元素覆盖在另外一个元素上面
可以移动一个元素的位置
可以固定某个容器在浏览器窗口的某个位置不动。（运用fixed属性）
可以做吸顶效果，比如百度新闻的导航（运用sticky属性）

我们研究定位正常从三个方便研究，即文档流，移动位置的时候参照物，层叠顺序。
A.position:static 定位的默认值，实际意义不大

B.position：absolute；绝对定位
1、文档流
脱离文档流当一个元素绝对定位之后，该元素是悬空的，下面的元素如果没有定位则会上去，被覆盖（全脱离）
浮动之后也是脱离文档流，但是浮动之后下面的容器会上去，里面的文字会环绕显示。（半脱离）
如果多个元素同时给了绝对定位，他们之间的层叠顺序是，结构在后的元素在最上面。
2、移动位置的时候参照物
定位之后想要移动位置，可以用margin或者用
left top bottom right属性移动位置
参照物1：浏览器的第一屏
参照物2：是父元素前提条件是有父元素且父元素有定位（可以是绝对、固定、相对）。
3、层叠顺序（z-index必须有定位才可以用）
如果想要改变定位之后的层叠顺序，可以通过一个属性 z-index属性改变
z-index的默认值是0 不带单位可以给负值
值越大，层越靠上没有最大值也没有最小值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
   margin: 0; padding: 0;}
			.a1{
   width: 600px;height: 200px;background: yellow;}
			.a2{
   width: 500px;height: 500px;background: skyblue; position: absolute;top: 50px;}
			.a3{
   width: 300px;height: 300px;background: blue;position: absolute; }
		</style>
	</head>
	<body>
		<div class="a1">a1</div>
		<div class

最低0.47元/天解锁文章

小峰子926

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS的五种定位方式

CSS中一共有五种定位：position：static；默认值position：absolute；绝对定位position：relative；相对对定位position：fixed；固定定位position：sticky；粘性定位其中，粘性定位是CSS3新增加的兼容性比较差定位的作用：在正常情况下，可以让一个元素覆盖在另外一个元素上面可以移动一个元素的位置可以固定某个容器在...
复制链接

扫一扫