CSS定位详解

作者：System 时间：2024年08月07日分类：所有,css3 字数：1258

CSS定位可以通过position属性来实现，它有四个值：static、relative、absolute和fixed。

static：默认值，没有定位。
relative：相对于元素在文档流中的原始位置进行定位。
absolute：相对于最近的非static定位的父元素进行定位。
fixed：相对于浏览器窗口进行定位。

实例代码：




<!DOCTYPE html>
<html>
<head>
<style>
  .static {
    position: static; /* 默认位置 */
    left: 50px; /* 不会有效果 */
    top: 50px; /* 不会有效果 */
  }
  
  .relative {
    position: relative; /* 相对于元素的原始位置 */
    left: 50px; /* 向右移动50像素 */
    top: 50px; /* 向下移动50像素 */
  }
  
  .absolute {
    position: absolute; /* 相对于最近的非static定位的父元素 */
    left: 50px; /* 向右移动50像素 */
    top: 50px; /* 向下移动50像素 */
  }
  
  .fixed {
    position: fixed; /* 相对于浏览器窗口 */
    right: 50px; /* 向右移动50像素 */
    bottom: 50px; /* 向上移动50像素 */
  }
  
  .parent {
    position: relative; /* 设置为relative，使得内部的absolute元素相对于它进行定位 */
    width: 200px;
    height: 200px;
    background-color: lightblue;
  }
</style>
</head>
<body>
 
<div class="static">Static Element</div>
<div class="relative">Relative Element</div>
<div class="parent">
  <div class="absolute">Absolute Element</div>
</div>
<div class="fixed">Fixed Element</div>
 
</body>
</html>

在这个例子中，.static类没有定位，.relative类相对于其在文档流中的原始位置移动，.absolute类相对于最近的.parent父元素定位，而.fixed类总是相对于浏览器窗口定位。

CSS定位详解

评论已关闭

推荐阅读