CSS定位

StoicD

于 2024-09-04 16:44:33 发布

阅读量232

点赞数 3

分类专栏：前端文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_43494013/article/details/141897344

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

position 属性指定了元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

在这里插入图片描述

静态定位

不设置的时候的默认值就是static，静态定位，没有定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列

  <head>
    <meta charset="UTF-8">
     <style>
    .innerDiv{
    width: 100px;
    height: 100px;
    }
    .d1{
    background-color: rgb(166, 247, 46);
    position: static;
    }
    .d2{
    background-color: rgb(79, 230, 124);
    }
    .d3{
    background-color: rgb(26, 165, 208);
    }
    </style>
    </head>
    <body>
    <div class="innerDiv d1">框1</div>
    <div class="innerDiv d2">框2</div>
    <div class="innerDiv d3">框3</div>
    </body>

效果：
在这里插入图片描述

绝对定位

absolute ,通过 top left right bottom 指定元素在页面上的固定位置，定位后元素会让出原来位置,其他元素可以占用

<head>
<meta charset="UTF-8">
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(166, 247, 46);
position: absolute;
left: 300px;
top: 100px;
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</body>

效果：
在这里插入图片描述

相对定位

relative 相对于自己原来的位置进行定位
定位后保留原来的站位,其他元素不会移动到该位置

<head>
  <meta charset="UTF-8">
  <style>
  .innerDiv{
  width: 100px;
  height: 100px;
  }
  .d1{
  background-color: rgb(166, 247, 46);
  position: relative;
  left: 30px;
  top: 30px;
  }
  .d2{
  background-color: rgb(79, 230, 124);
  }
  .d3{
  background-color: rgb(26, 165, 208);
  }
  </style>
  </head>
  <body>
  <div class="innerDiv d1">框1</div>
  <div class="innerDiv d2">框2</div>
  <div class="innerDiv d3">框3</div>
  </body>

效果：
在这里插入图片描述

固定定位

fixed 在浏览器窗口固定位置,不会随着页面的上下移动而移动
元素定位后会让出原来的位置,其他元素可以占用

<head>
<meta charset="UTF-8">
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(166, 247, 46);
position: fixed;
right: 30px;
top: 30px;
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
<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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>