绝对定位

可用

4.1 absolute positioning

在 CSS 中,绝对定位 (absolute positioning) 允许你精确控制元素在网页上的位置。使用绝对定位时,元素会从文档的正常流中移除,并相对于最近的已定位祖先进行定位。如果没有这样的祖先,元素将相对于初始容器进行定位(通常是 <html><body>)。

绝对定位的主要特点:

  1. 从文档流中移除:绝对定位的元素不会影响其他元素,并且在计算父级元素的尺寸时不被考虑。
  2. 相对定位:元素相对于最近的具有相对 (position: relative)、绝对 (position: absolute)、固定 (position: fixed) 或粘性 (position: sticky) 定位的祖先进行定位。
  3. 使用坐标:toprightbottomleft 属性用于指定元素的精确位置。

基本绝对定位示例

来看一个简单的绝对定位元素的例子:

CSS
.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightgrey;
}

.box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
}
HTML
<div class="container">
  <div class="box">Absolute Box</div>
</div>

在这个例子中,.box 元素是相对于父容器 .container 定位的,而 .container 设置了 position: relative;

4.2 创建叠加 (overlay)

绝对定位常用于创建叠加层,比如模态窗口、弹出提示和灯箱。

绝对定位示例:

CSS
.wrapper {
  min-height: 300px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
HTML
<div class="wrapper">
  <div class="overlay">
    <div class="modal">
      <p>Modal Content</p>
    </div>
  </div>
</div>

4.3 精确布局和界面组件

绝对定位在创建精确布局时非常有用,比如媒体播放器中的控件、自定义控件和工具栏。

绝对定位示例:

CSS
.player {
  position: relative;
  width: 400px;
  height: 50px;
  background-color: #333;
  color: white;
}

.play-button {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.volume-control {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
HTML
<div class="player">
  <div class="play-button">Play</div>
  <div class="volume-control">Volume</div>
</div>

4.4 创建复杂布局

绝对定位可以创建复杂的布局,比如信息面板和交互元素。

绝对定位示例:

CSS
.dashboard {
  position: relative;
  width: 800px;
  height: 600px;
  background-color: #f0f0f0;
}

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #333;
  color: white;
}

.main-content {
  position: absolute;
  top: 0;
  left: 200px;
  width: calc(100% - 200px);
  height: 100%;
  background-color: #fff;
}
HTML
<div class="dashboard">
  <div class="sidebar">Sidebar</div>
  <div class="main-content">Main Content</div>
</div>
1
任务
Frontend SELF ZH,  第 21 级课程 3
已锁定
绝对定位
绝对定位
1
任务
Frontend SELF ZH,  第 21 级课程 3
已锁定
创建覆盖层
创建覆盖层
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论