当前位置：首页 > news >正文

CSS定位

news 2025/7/28 8:36:43

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>