CSS-position定位详解

置顶王十四兄

已于 2023-01-01 14:54:18 修改

阅读量242

点赞数 1

分类专栏： css 文章标签： css html 前端 web css3

于 2022-11-21 23:09:59 首次发布

本文链接：https://blog.csdn.net/weixin_64933233/article/details/127974511

版权

css 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS中的定位概念，包括相对定位、绝对定位和固定定位。相对定位允许元素在文档流中保持原有位置并可设置偏移量；绝对定位则使元素脱离文档流，根据最近的定位祖先元素进行定位；固定定位类似绝对定位，但始终相对于浏览器窗口定位，不受滚动影响。

摘要由CSDN通过智能技术生成

相对定位

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: relative;
        left: 100px;
        top: 200px;
      }
      .box3 {
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
      }
      .s1 {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <span class="s1">我是一个span</span>
  </body>
</html>

请添加图片描述

1. 定位说明

定位指的就是将指定的元素摆放到页面的任意位置
- 通过定位可以任意的摆放这个元素
通过 position 属性来设置元素的定位
可选值：
- static：默认值，元素没有开启定位
- relative：开启元素的相对定位
- absolute：开启元素的绝对定位
- fixed：开启元素的固定定位(也是绝对定位的一种)

2. 相对定位说明

当元素的 position 属性设置为 relative 时，则开启了元素的相对定位

当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素不会脱离文档流
相对定位会使元素提升一个层级
相对定位不会改变元素的性质，块还是块，内联还是内联

position: relative;

3. 相对定位的偏移量

当开启了元素的定位(position 属性值是一个非 static 的值)时
可以通过 left right top bottom 四个属性来设置元素的偏移量
- left：元素相对于其定位位置的左侧的偏移量
- right：元素相对于其定位位置的右侧的偏移量
- top：元素相对于其定位位置的上边的偏移量
- bottom：元素相对于其定位位置的下边的偏移量
通常偏移量只需要使用两个就可以对一个元素进行定位
- 一般选择水平方向的偏移量和垂直方向的偏移量为一个元素进行定位

绝对定位

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: absolute;
        /* left: 100px;
         top: 100px; */
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: yellowgreen;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: orange;
        /*开启box4的相对定位*/
        /* position: relative; */
      }
      s1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box5">
      <div class="box4">
        <div class="box2"></div>
      </div>
    </div>
    <div class="box3"></div>
    <span class="s1">我是一个span</span>
  </body>
</html>

请添加图片描述

1. 说明

当 position 属性设置为 absolute 时，则开启了元素的绝对定位

开启绝对定位，会使元素脱离文档流
开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的

一般情况开了子元素的绝对定位都会开启父元素的相对定位
- 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
绝对定位会使元素提升一个层级
绝对定位会改变元素的性质，
- 内联元素会变成块元素
- 块元素的宽度和高度默认都被内容撑开

position: absolute;

固定定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				/*
				 * IE6不支持固定定位
				 */
				position: fixed;
				left: 0px;
				top: 0px;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body style="height: 5000px;">
		<div class="box1"></div>
		<div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;">
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>