前端笔记——CSS定位（Position）属性详解！

最新推荐文章于 2024-06-15 22:45:19 发布

夜叔

最新推荐文章于 2024-06-15 22:45:19 发布

阅读量1.2k

点赞数 2

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_38211205/article/details/104578345

版权

今天我们来谈谈什么CSS定位属性（ Position）？

在了解之前，需要知道CSS的定位机制：它们分别有：
普通流、浮动流、定位流。
1、普通：上下排列的布局（注：大部分情况）
2、浮动：左右排列的布局（注：大部分情况）
3、定位：层叠（叠加）排列的布局（注：大部分情况）

而在CSS中，定位属性（position）又分别有：如下几种：
1. position：static ; （默认值，没有定位；可以用于取消元素之前的定位设置）
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

在<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>        
		 .box{
            background-color: #ff0;
            width: 100%;
	        height: 300px;
        }
        .content{
	        background-color: #00f;
	        width: 200px;
	        height: 200px;
	        position: static;
	        left: 50px;/* 这个left没有起作用 */
	    }
	   </style>
	</head>
	<body>
		 <div class="box">
        <div class="content">    
        </div>
    </div>
	</body>
</html>

2.position： relative相对定位（参照物：自己所在的位置）
特点：
1 、如果没有定位偏移量，对元素本身没有任何影响
2、不使元素脱离文档流，空间是会被保留。
3 、不影响其他元素布局
4、 left、top、right、bottom是相对于当前元素自身进行偏移的，不能独自存在，必须配合定位元素一起使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>        
		 .box{
            background-color: #ff0;
            width: 100%;
	        height: 800px;
        }
        .content{
	        background-color: #00f;
	        width: 200px;
	        height: 200px;
	        position: relative；
	    }
		.content2{
			background-color: #F15A23;
			width: 200px;
			height: 200px;
		}
	   </style>
	</head>
	<body>
		 <div class="box">
        <div class="content"> </div>
		<div class="content2"></div>
    </div>
	</body>
</html>

给中间的content2设置偏移量后：

 .content2{
	        background-color: #00f;
	        width: 200px;
	        height: 200px;
	        position: relative;
	        left: 50px;/* 设置偏移量left跟top */
			top: 50px;
	    }

可以看到中间的盒子相对原来的位置进行了偏移，原来的位置依旧在
在这里插入图片描述

3. position：absolute : 绝对定位
特点：
1、使元素完全脱离文档流
2、使内联元素支持宽高（让内联具备块特性）
3、使块元素默认宽根据内容决定（让块具备内联的特性）
4、如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。默认情况下是相对可视窗口进行定位的。
，

	 包含块的概念：
	       包含块绝对定位的基础；
	       绝对定位元素会根据包含块进行绝对定位，默认情况下 ，浏览器的可视窗口是一个大的包含块，默认情况下，绝对定位元素会相对浏览器的可视窗口进行定位；如果他的祖先级元素定义了包含块，那他就最近的祖先级元素进行绝对定位。
		      怎么给他的祖先级元素定义成包含块：  给祖先级元素添加position：relative/absolute/fixed。
           
           实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>        
		 .box{
            background-color: #ff0;
            width: 100%;
	        height: 1000px;
        }
        .content1{
	        background-color: #00f;
	        width: 200px;
	        height: 200px;
	    }
		.content2{
			background-color: #F15A23;
			width: 300px;
			height: 200px;
			/* position: absolute; 没有添加定位属性absolute*/
		}
		.content3{
			background-color: #000;
			width: 200px;
			height: 200px;
		}
	   </style>
	</head>
	<body>
		 <div class="box">
        <div class="content1"> </div>
		<div class="content2"></div>
		<div class="content3"></div>
		
    </div>
	</body>
</html>

而给中间的盒子添加绝对定位absolute属性，设置偏移量后：

.content2{
			background-color: #F15A23;
			width: 300px;
			height: 200px;
			position: absolute; /* 添加定位属性absolute */
			top: 50px;
			left: 50px;
		}

中间的盒子脱离了文档流。

因为 content2 的父元素box 没有设置 position，默认为 static，所以找到的第一个父元素是 body（），可以看成是元素（content2）相对于 body 向下移动50px，向左移动50px。

4.固定定位：position： fixed ； （参照物：始终都是相对于整个浏览器窗口进行固定定位的）
特点：
1、使元素完全脱离文档流
2、使内联元素支持宽高（让内联具备内联块特性）
3、使块元素默认宽根据内容决定（让块具备内联块的特性）
4、相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响不会受到祖先元素的影响。

注意： 不为元素预留空间，而是通过指定元素相对于屏幕视的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。元素会出现在的每页的固定位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            background-color: #666 ;
            width: 100%;
            height: 3000px;
        }
        .content{
            background-color: yellow;
            width: 100px;
            height: 100px;
            position: fixed;/* 这里使用了fixed */
			right: 50px;
			top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">    
        </div>
    </div>
</body>
</html>

在这里插入图片描述
当我们滚动页面向下时，并不会移动。

5. 黏性定位: sticky
在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。

夜叔

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端笔记——CSS定位（Position）属性详解！

今天我们来谈谈什么CSS定位属性（ Position）？在了解之前，需要知道CSS的定位机制：它们分别有：普通流、浮动流、定位流。1、普通：上下排列的布局（注：大部分情况）2、浮动：左右排列的布局（注：大部分情况）3、定位：层叠（叠加）排列的布局（注：大部分情况）而在CSS中，定位属性（position）又分别有：如下几种：1. position：static ; （默认值，没...
复制链接

扫一扫