position

为了制作更多复杂的布局，我们需要讨论下 position 属性。

它有一大堆的值，名字还都特抽象，别提有多难记了。

让我们先一个个的过一遍，不过你最好还是把这页放到书签里。

先看下运行结果，在看下源码，最后解释一下position的各个属性。

结果：

源码看一下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>position</title>

    <style>

        .static {

            border: 1px solid red;

            max-width: 400px;

            margin: 20px auto;

            position: static;

        }

        .relative1 {

            border: 1px solid pink;

            max-width: 400px;

            margin: 20px auto;

            position: relative;

        }

        .relative2 {

            border: 1px solid green;

            max-width: 400px;

            margin: 20px auto;

            position: relative;

            left: 30px;

            top: -30px;

        }

        .relative3 {

            border: 1px solid hotpink;

            max-width: 400px;

            margin: 20px auto;

            position: relative;

        }

        .relative {

            border: 1px solid hotpink;

            max-width: 500px;

            height: 300px;

            margin: 20px auto;

            position: relative;

        }

        .position {

            border: 1px solid lime;

            width: 300px;

            height: 200px;

            position: absolute;

            left: 0;

            bottom: 0;

        }

        .fixed {

            border: 1px solid #e3d2d2;

            max-width: 200px;

            position: fixed;

            right: 0;

            bottom: 0;

        }

    </style>

</head>

<body>

    <div class="static">

        static 是默认值。<br />

        任意 position: static; 的元素不会被特殊的定位。<br />

        一个 static 元素表示它不会被“positioned”，<br />

        一个 position 属性被设置为其他值的元素表示它会被“positioned”。<br />

    </div>

    <div class="relative1">

        relative 表现的和 static 一样，<br />

        除非你添加了一些额外的属性。<br />

    </div>

    <div class="relative2">

        在一个相对定位（position属性的值为relative）的元素上<br />

        设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。<br />

        其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。<br />

    </div>

    <div class="relative3">

        随意改变relative2的div的位置,是不会影响<br />

        relative1和relative3的<br />

    </div>

    <div class="relative">

        这个元素是相对定位的。如果它是 position: static; <br />

        那么它的绝对定位子元素会跳过它直接相对于body元素定位。<br />

        <div class="position">

            这个元素是绝对定位的。它相对于它的父元素定位。

        </div>

    </div>

    <div class="fixed">

        一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，<br />

        这意味着即便页面滚动，它还是会停留在相同的位置。<br />

        和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。<br />

        一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。

    </div>

</body>

</html>

接下来看一下属性解释：

static

static 是默认值。

任意 position: static; 的元素不会被特殊的定位。

一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

relative

relative 表现的和 static 一样，除非你添加了一些额外的属性。

在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。

其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

fixed

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。

和 relative 一样， top 、 right 、 bottom和 left 属性都可用。

一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。

令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.

absolute

absolute 是最棘手的position值。

absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。

如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，

那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。

记住一个“positioned”元素是指 position 值不是 static的元素。

原文地址： http://zh.learnlayout.com/position.html

学习CSS布局 - position的更多相关文章

  1. 学习CSS布局 - position例子

    position例子 通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...

  2. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  3. “学习CSS布局” 笔记

    学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和 ...

  4. (四)学习CSS之position、bottom、left、right和top属性

    参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position 属性规定元素的定位类型. 这个属性定义建立元素布局所用的定位机制 ...

  5. 学习CSS布局 - dispaly属性

    "display"属性 display 是CSS中最重要的用于控制布局的属性. 每个元素都有一个默认的 display 值,这与元素的类型有关. 对于大多数元素它们的默认值通常是  ...

  6. 学习CSS布局 - box-sizing

    box-sizing 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性. 当你设置一个元素为 box-sizing: border-box; 时,此元素 ...

  7. 学习CSS布局 - 盒模型

    盒模型 在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度 ...

  8. 学习CSS布局 - 没有布局

    如果你只想把所有内容都塞进一栏里,那么不用设置任何布局也是OK的. 然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常难受: 读完每一行之后,你的视觉焦点要从右到左移动一大段距离. 试着调整下浏 ...

  9. 学习CSS布局 - max-width

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. HDU4287

    Intelligent IME Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  2. javascript基础知识学习

    javascript中几种基础函数的介绍 1.typeof 注意: ① typeof 是操作符,不是函数: ② typeof 操作符 接收一个参数,用来判断参数数据类型,存在六种返回值类型,非别是:u ...

  3. Python 函数介绍

    函数的作用 1.减少重复代码 2.方便修改,更易扩展 3.保持代码一致性 函数的命名规则: 1.函数名必须以下划线或字母开头,可以包含任意字母,数字或下划线的组合,不能使用任何的标点符号. 2.函数名 ...

  4. JavaScript与正则表达式

    正则表达式的定义 正则表达式与字符串对象相关的方法  相关示例 一.正则表达式(regular expression简称res) 1.定义: 一个正则表达式就是由普通字符以及特殊字符(称为元字符)组成 ...

  5. CentOS7的/tmp目录自动清理规则

    CentOS6以下系统(含)使用watchtmp + cron来实现定时清理临时文件的效果,这点在CentOS7发生了变化. 在CentOS7下,系统使用systemd管理易变与临时文件,与之相关的系 ...

  6. 记录C/C++中遇到的一些小问题

    1. printf 比如 char a = \x90; printf("%02x", a); 想输出为90,没想到却是ffffff90,这个问题害我一个程序老是出错 最终发现只要改 ...

  7. Python CNN卷积神经网络代码实现

    # -*- coding: utf-8 -*- """ Created on Wed Nov 21 17:32:28 2018 @author: zhen "& ...

  8. [20180319]直接路径读特例12c.txt

    [20180319]直接路径读特例12c.txt --//昨天的测试突然想起以前遇到的直接路径读特例,在12c重复测试看看. 1.环境:SCOTT@test01p> @ ver1 PORT_ST ...

  9. MVC| 路由测试代码

    using System; using Microsoft.VisualStudio.TestTools.UnitTesting; using Moq; using System.Web; using ...

  10. late_initcall和module_init的区别

    在init.h中有如下定义: 详情参照:linux 设备驱动加载的先后顺序 #define pure_initcall(fn) __define_initcall("0",fn,1 ...