9.css的定位

最新推荐文章于 2024-06-20 20:19:27 发布

堵车了

最新推荐文章于 2024-06-20 20:19:27 发布

阅读量86

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_45660035/article/details/120322983

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.定位的组成

定位是由定位模式和边偏移来组成
定位模式是由position来指定。

模式	值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed
粘性定位	sticky

边偏移是由top、bottom、left 和 right 属性来指定（使用这四个属性必须先有position属性，否则不生效）

2.五种定位模式特性

1.静态定位（很少用）

position: static;

特点：

元素默认的定位方式，没有脱离标准流（不脱标）
它不受边偏移的影响（边偏移属性无效）

2.相对定位

position: relative;

特点：

相对定位是指元素相对于原来的位置移动
不会脱离标准流，元素还是会保留原来的位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 200px;
      height: 100px;
      position: relative;
      top:50px;
      background-color: pink;
    }
    .box2 {
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box1">
  </div>
  <div class="box2"></div>
</body>

</html>

3.绝对定位

position: absolute;

特点：

绝对定位是以最近的拥有定位的祖先元素来进行定位的
若没有祖先元素或所有的祖先元素都没有定位，则以浏览器文档(body)进行定位
绝对定位脱离标准流，不再占有原来位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: pink;
    }
    .box2 {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 20px;
      background-color: blue;
    }
    .box3 {
      width: 50px;
      height: 50px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  
</body>

</html>

4.固定定位

position: fixed;

特点：

固定定位是相对于浏览器可视区(能看到的)进行定位的
固定定位脱离标准流不占用原来位置
不随滚动条滚动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      position: fixed;
      top: 0;
      left: 0;
      background-color: pink;
    }
    .box2 {
      width: 50px;
      height: 50px;
      background-color: blue;
    }
    .box3 {
      width: 50px;
      height: 50px;
      background-color: green;
    }
    .box4 {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <div class ="box4">

  </div>
  
</body>

</html>

5.粘性定位（有兼容问题）

position: sticky;

特点：

粘性定位是相对定位和固定定位的结合
最开始是相对定位（占有原来位置）当鼠标滚动触发设置的边偏移变成固定定位
必须设置边边偏移

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 p {
      position: sticky;
      top: 20px;
      color: red;
    }
  </style>
</head>

<body>
  <div class="box1">
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    <p>此处是粘性定位的设置</p>
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
    大苏打飒飒飒飒打撒萨达萨达撒<br />
  </div>

  </div>

</body>

</html>

3.定位的叠放次序

z-index: auto
/* 默认是auto ，即为0， 可以设置正整数，0，负整数，数值越大越在屏幕前面
	若对两个浮动盒子都没指定z-index,遵循后来居上原则
*/

4.常用的一些技巧

1.绝对定位的水平居中对齐

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*
    设置left: 50%;
    用 margin-left减自身容器宽度一半
    */
    .box1{
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      margin-left: 50px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box1">


  </div>

</body>

</html>

2.固定定位固定到版心位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*
    设置left: 50%;
    用 margin-left加版心宽度的一半
    */
    .box1{
      width: 100px;
      height: 100px;
      position: fixed;
      left: 50%;
      margin-left: 50px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box1">


  </div>

</body>

</html>

5.定位的一些特殊属性

1.行内元素添加绝对或固定定位，可以设置宽度和高度
2.块级元素加绝对或固定定位，若不设置宽度和高度，则大小是根据内容变化
3.脱标的盒子不会触发外边距合并问题
4.浮动元素会按住标准流的盒子，但是不会压住标准流的文字和图片；定位会全部压住

堵车了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9.css的定位

1.定位的组成定位是由定位模式和边偏移来组成定位模式是由position来指定。模式值静态定位static相对定位relative绝对定位absolute固定定位fixed粘性定位sticky边偏移是由top、bottom、left 和 right 属性来指定（使用这四个属性必须先有position属性，否则不生效）2.五种定位模式特性1.静态定位（很少用）position: static;特点：元素默认的定位方式，没有脱离标准
复制链接

扫一扫