CSS定位实操代码掌握固定定位、绝对定位与相对定位子绝父相

定定位

position:fixed;

用我自己的话来说，就是让你想要固定的东西固定。例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			body{
				height: 2000px;
				
			}
			
			.photo{
				width: 600px;
				height: 600px;
				position: fixed;
				left: calc(50%-300px);
				top: calc(50%-300px);
				
			}
		</style>
		
	</head>
	<body>
		10月7日，昆凌在社交平台晒出自己荡秋千的美照。
		照片中，昆凌长发披肩，头戴假日风草帽，
		穿一袭白裙在海边荡着秋千，回眸甜笑，宛若仙子。
		<div id="box1">
			<img src="img/kunling.jpg" class="photo">
		</div>
		
	</body>
</html>

对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程，还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。

当我下拉时，图片的位置是不会动的。即使下滑到了最底部，图片的位置也是固定的。对比下面这张图：

绝对定位和相对定位

子绝父相

子绝父相就是指子元素设置绝对定位，而父元素设置相对定位。换句话说：如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。

实操代码理解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#father{
				width: 300px;
				height: 300px;
				background-color: coral;
				position: relative;
				border: solid 3px red;
			}
			
			#son1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
				left: 20px;
				top: 50px;
			}
			
			#son2{
				width: 100px;
				height: 100px;
				background-color: chartreuse;
				position: absolute;
				left: 40px;
				top: 90px;
			}
		</style>
	</head>
	<body>
		
		<div id="father">
			I am father
		</div>
		
		<div id="son1">
			I am son1
		</div>
		
		<div id="son2">
			I am son2
		</div>
		
	</body>
</html>

看图：在father这个容器设置了相对定位之后，son1和son2都设置了绝对定位，我们的子类这时其实不是在body中绝对定位（absolute），而是在其父类的范围中绝对定位（absolute）。

绝对定位

position: absolute;

查找定位的参照物方法：
从当前元素开始往上找，直到找到一个具有定位属性的元素为准，以这个元素为参照进行定位。
如果没有一个元素有定位属性,最终就参照body进行定位。（我一直理解的就是绝对定位就是你想定哪里定哪里）

定位的时候：结合top left right bottom 这四个方向属性进行配合定位。但是要注意：不能同时选择left喝right

注意：这里要区别于相对定位，在使用相对定位时，无论是否进行移动，原来的位置就没有了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				background-color: salmon;
				width: 100px;
				height: 100px;
				position: absolute;
				left: 100px;
				top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			我是box1，我采用了绝对定位
		</div>
		
	</body>
</html>

相对定位

position: relative;

相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；

注意，在使用相对定位时，无论是否进行移动，原来的位置始终保留着。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: brown;
				position: relative;
				left: 300px;
				top: 300px;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		
		<div id="box1">
			
		</div>
		
		<div id="box2">
			
		</div>
		
	</body>
</html>

绝对定位和相对定位的区别

相对定位的参照物是参照物本身。
绝对定位的参照物就是父级元素，当父级元素中不存在相对定位，那么它的参照物就是body
相对定位，设置后，原来的位置始终保留着
绝对定位，设置后，原来的位置会被后面的内容占据

原文链接：https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/108961741

作者：我一个超级无敌可爱的人鸭

出处：CSDN

SS定位

CSS定位属性允许您定位元素。它还可以将元素放在另一个元素之后，并指定当元素的内容太大时应该发生什么。

可以使用顶部，底部，左侧和右侧属性定位元素。但是，除非首先设置position属性，否则这些属性将不起作用。根据定位方法，它们的工作方式也不同。

有三种定位方式：静态、固定、相对定位。

静态定位

HTML元素默认为静态。静态定位元件总是根据页面的正常流动来定位。静态元素不受top bottom left right的影响。

固定定位 fixed

具有固定位置的元素相对于浏览器窗口定位，即使滚动窗口也不会移动。

可以使用顶部，右侧，底部和左侧的一个或多个属性指定位置。

相对定位 relative

相对定位的元件相对于其正常位置定位。顶部，右侧，底部和左侧的属性可用于指定元件如何移动。

绝对定位 absolute

相对于具有position属性设置的父对象的偏移量，不占用原页面空间。

若所有的父对象都没有设置position属性，则以body即浏览器窗口为参照进行定位。

一般，将父元素position设置为relative,子元素设置为absolute，这样子元素可以相对于父元素进行定位，而父元素保持原位（不设置父元素偏移量的话）

理解定位，首先要了解文档流是什么。

文件流：指盒子按照html标签编写的顺序，从上到下，从左到右排列，块元素占一行，从左到右排列，每一行元素在一行中从左到右排列，先写的先，后写的排在后面，每个盒子都占据自己的位置。

位置可以使方框脱离文档流，就好比将元素分割成几层，没有位置的在一层，定位在没有定位的上面一层。

你可以用Z-index设置等级，Z-index越大，显示的就越向前。在创建网页弹框时，通常将其设置为最大。

我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

relative生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。

absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

static默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素的定位</title>
    <style>
        .con1,.con2,.con3,.con4,.con5{
            border: 1px solid #000;
            margin: 10px;
            height: 400px;
        }
        /* 这个div属于它下属div的父元素，如果没有设置浮动，当下属div设置absolute时，相对于body偏移*/
        .con3{
            position: relative;  
        }
        .no_pos_1,.no_pos_2{
            height: 100px;
            width: 400px;
            margin :10px;
            font-size: 16px;
        }
        .no_pos_1{
            background-color: red;
        }
        .no_pos_2{
            background-color: gold;
        }

        .relative_1,.relative_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .relative_1{
            background-color: red;
            position: relative;
            left: 50px;
            top: 50px;
        }
        .relative_2{
            background-color: gold;
        }

        .absolute_1,.absolute_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .absolute_1{
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .absolute_2{
            background-color: gold;
        }
        .fixed_1,.fixed_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .fixed_1{
            background-color: red;
            position: fixed;
            left: 50%;
            margin-left: -200px;  /* 设置水平垂直居中*/
            top: 50%;
            margin-top: -50px;
            z-index: 9999;   /*  弹框一般设置足够大的值 */
        }
        
         /* 弹框效果 */ 
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.6;      /* 设置透明度 */
            z-index: 9998;   /* 一般比弹框设置的值小1*/
        }
        .fixed_2{
            background-color: gold;
        }
        .static_1{
            height: 100px;
            width: 400px;
            margin-top :10px;
            background-color: gold;
            position: static;
        }
</style>
</head>
<body>
    <div class="mask">

    </div>
    <div class="con1">
        <div class="no_pos_1">
            没有使用定位
        </div>

        <div class="no_pos_2">
            没有使用定位
        </div>
    </div>
    <div class="con2">
        <div class="relative_1">
            relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移
        </div>
        <div class="relative_2">
            
        </div>
    </div>
    <div class="con3">
        <div class="absolute_1">
            absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
        </div>
        <div class="absolute_2">
            
        </div>
    </div>
    <div class="con4">
        <div class="fixed_1">
            fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
        </div>
        
        <div class="fixed_2">

        </div>
    </div>
    <div class="con5">
        <div class="static_1">
            static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
        </div>
    </div>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143复制代码类型：[html]

制作一个弹框效果：

「链接」

在线咨询

上一篇：CSS这样处理HTML列表，三个简单的CSS属性，美化你的页面
下一篇：JavaScript中装载XML文档

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS定位 实操代码掌握固定定位、绝对定位与相对定位子绝父相

定定位