CSS进阶08-绝对定位 Absolute Positioning

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1. 简介

在绝对定位模型中,盒根据其包含块显式偏移。盒从标准流中完全脱离(对后来的同胞元素没有影响)。绝对定位盒为其标准流的子元素和绝对定位(非固定定位)后代创建新的包含块。然而,绝对定位元素的内容不在任何其他盒的流中,它们可能遮挡其他盒的内容(或被遮挡),这取决于重叠盒子的堆叠层级stack levels

2. 固定定位 Fixed positioning

固定定位是绝对定位的子类。唯一的区别在于,固定定位盒的包含块是由视口创建的。在连续媒体中,当文档滚动时,固定盒不会移动。就这点来讲,它们同固定背景图片fixed background images相像。在分页媒体paged media中,固定定位盒在每一页重复。这对布局很有用,比如,在每个页面的底部放置签名。比页面区域要大的固定定位盒将会被裁剪。固定定位盒在初始化包含块中不可见的部分将不会打印。

开发者可以使用固定定位去创建框架式frame-like布局。考虑如下框架布局:

这可以通过如下HTML文档和样式规则实现:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>A frame document with CSS 2.1</title>
<style type="text/css" media="screen">
   body { height: 8.5in }/* 计算百分百高度需要 */
   #header {
      position: fixed;
      width: 100%;
      height: 15%;
      top: 0;
      right: 0;
      bottom: auto;
      left: 0;
   }
   #sidebar {
      position: fixed;
      width: 10em;
      height: auto;
      top: 15%;
      right: auto;
      bottom: 100px;
      left: 0;
   }
   #main {
      position: fixed;
      width: auto;
      height: auto;
      top: 15%;
      right: 0;
      bottom: 100px;
      left: 10em;
   }
   #footer {
      position: fixed;
      width: 100%;
      height: 100px;
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
   }
</style>
</head>
<body>
   <div id="header"> ...  </div>
   <div id="sidebar"> ...  </div>
   <div id="main"> ...  </div>
   <div id="footer"> ...  </div>
</body>
</html>

参考

https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro https://www.w3.org/TR/CSS2/visuren.html CSS规范 > 9 视觉格式化模型 Visual Formatting Model

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

创意九宫格图片制作技巧!

今天给大家分享九宫格照片的制作技巧! ▽ 是不是每次看到朋友圈有人发九宫格图片 都觉得特别羡慕 其实这种图片可以自己制作 步骤也不复杂 下面交给大家三种制作方法...

4369
来自专栏黑白安全

javascript实现background 定时循环随机背景图

这里用的固定地址,用的新浪图床,喜欢的话可以自己扩充图片,我这里简短的展示了10个图片!

1633
来自专栏九彩拼盘的叨叨叨

CSS3的属性值inital

属性值inital是指CSS规范(CSS specifications)指定的值。 例如规范中定义: display 的 inital 值为 inline; ...

812
来自专栏郭诗雅的专栏

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

1.7K9
来自专栏闻道于事

正式学习第一天下午——基础标签及其属性

今天下午学习了html中的基础标签及其属性。以下面的HTML代码为例。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

2665
来自专栏非著名程序员

Android字体大小怎么自适应不同分辨率?

今天有人问我,android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适应是一个道理的。 一、 原理如下: 假设需要适应320...

3748
来自专栏非典型技术宅

iOS动画系列之三:Core Animation1. 介绍2. 支持的平台3. Core Animation 的继承结构图4. 常见属性和使用步骤

1194
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

9775
来自专栏Flutter入门到实战

Android适配全面总结(一)----屏幕适配

版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad...

2054
来自专栏抠抠空间

Bootstrap框架

Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的...

5866

扫码关注云+社区

领取腾讯云代金券