CSS定位布局详解

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

CSS定位布局主要是通过position属性来实现的，它有四个值：static、relative、absolute和fixed。

static：默认值，没有定位，元素出现在正常的流中。
relative：相对于其正常位置进行定位。
absolute：相对于最近的非static定位的父元素进行定位。
fixed：相对于浏览器窗口进行定位。

实例代码：




<!DOCTYPE html>
<html>
<head>
<style>
  .static {
    position: static; /* 默认位置 */
    left: 50px; /* 左侧偏移50px */
    top: 20px; /* 顶部偏移20px */
  }
  
  .relative {
    position: relative; /* 相对于正常位置定位 */
    left: 40px; /* 左侧偏移40px */
    top: 10px; /* 顶部偏移10px */
  }
  
  .absolute {
    position: absolute; /* 相对于最近的非static定位父元素定位 */
    left: 30px; /* 左侧偏移30px */
    top: 5px; /* 顶部偏移5px */
  }
  
  .fixed {
    position: fixed; /* 相对于浏览器窗口定位 */
    right: 20px; /* 右侧偏移20px */
    bottom: 15px; /* 底部偏移15px */
  }
  
  .parent {
    position: relative; /* 设置为relative以便于absolute定位 */
    width: 300px; /* 设置宽度 */
    height: 200px; /* 设置高度 */
    background-color: #f0f0f0; /* 背景颜色 */
    border: 2px solid #000; /* 边框 */
  }
</style>
</head>
<body>
 
<div class="parent">
  <div class="static">Static</div>
  <div class="relative">Relative</div>
  <div class="absolute">Absolute</div>
  <div class="fixed">Fixed</div>
</div>
 
</body>
</html>

在这个例子中，.parent是一个相对定位的容器，其四个子元素分别使用不同的定位方式。.static是默认定位，.relative、.absolute和.fixed都是相对定位，.absolute的偏移是相对于.parent的。.fixed是相对于浏览器窗口的固定定位。

CSS定位布局详解

评论已关闭

推荐阅读