position 有4中不同类型的定位,分别为static、relative、absolute、fixed
1.static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

2.relative(相对定位)
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
默认情况下,它是以父级元素的原始点(左上角)作为原始点,如果没有父级元素,则以文本流(页面的文本区)的顺序在上一个元素的底部作为原始点,配合TRBL(top、right、bottom、left)进行定位;
需要注意的地方是如果父级元素有padding等其他CSS属性,当前的原始点则按照父级元素的内容区的原始点来进行定位(受父级元素的padding等CSS元素影响)。有如下的属性:
a.如果没有TRBL,以父级元素的左上角作为原始点进行定位,如果没有父级元素,则以浏览器的左上角作为原始点进行定位;如果在没有父级元素的情况下,存在文本,则以它前面的一个文本的最后一个字的右上角
作为原始点进行定位,且文字不断开,覆盖在文字的上方。
b.设定了TRBL,但是父级元素没有设置position属性,仍然以父级元素的左上角作为原始点进行定位。
c.如果设定了TRBL,且父级元素也设置了position属性(无论是absolute还是relative),也以父级元素的左上角作为原始点进行定位,如果父级元素有padding等CSS元素,则以内容区的左上角作为原始点进行定位。

3.absolute(绝对定位)
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
默认情况下,是参照浏览器的左上角,配合TRBL(top、right、bottom、left)进行定位;主要有如下的属性:
a.如果没有TRBL,以父级元素的左上角作为原始点进行定位,如果没有父级元素,则以浏览器的左上角作为原始点进行定位;如果在没有父级元素的情况下,存在文本,则以它前面的一个文本的最后一个字的右上角
作为原始点进行定位,且文字不断开,覆盖在文字的上方。
b.设定了TRBL,但是父级元素没有设置position属性,那么则以浏览器的左上角为原始点进行定位,位置将由TRBL决定。
c.如果设定了TRBL,且父级元素也设置了position属性(无论是absolute还是relative),则会以父级元素的左上角作为原始点进行定位,且父级元素的padding等CSS元素不会对其影响。

注意:使用position来布局,父级元素的position属性为relative,而定位于父级内部某个位置的元素,最好用absolute(因为可以不受父级元素的padding等CSS属性影响)

4.TRBL
top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right:定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom:定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left:定义了定位元素左外边距边界与其包含块左边界之间的偏移。

5.overflow
设置当元素的内容溢出其区域时发生的事情。
接受visible(默认值)、hidden(内容会被修剪,并且其余内容是不可见的)、scroll(内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容)、
auto(如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容)

6.clip
设置元素的形状
接受auto(默认值)、shape(唯一合法的形状值是:rect (top, right, bottom, left),其中值都为数值,如1px)

7.vertical-align
设置元素的对齐方式
可以接受如下的值:

8.z-index
设置元素的堆叠顺序
可以接受auto(默认)、number(如取-1,则处于字体的下方)

CSS学习笔记之定位的更多相关文章

  1. html+css学习笔记 4[定位]

    如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative;  相对定位         a ...

  2. CSS学习笔记:定位属性position

    目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...

  3. CSS学习笔记10 相对定位,绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  4. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  5. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. CSS学习笔记之样式声明

    目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...

  7. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  8. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

随机推荐

  1. 解决windows系统80端口被占用问题

    在windows下部署web应用(80端口),启动时提示bind 80端口失败 检查端口占用: netstat -ano | findstr 发现System进程 (pid=4) 占用了端口 然而本机 ...

  2. CSS之column语法

    columns column-width:[<length>|auto] 定义每栏的宽度 column-span:1|all 1:只在本栏中显示:all:横跨所有栏目并定位在栏目的Z轴之上 ...

  3. PorterDuff.Mode error

    Android PorterDuff.Mode error: PorterDuff cannot be resolved to a variable     Answers:   Add this t ...

  4. Android 异步加载解决方案

    Android的Lazy Load主要体现在网络数据(图片)异步加载.数据库查询.复杂业务逻辑处理以及费时任务操作导致的异步处理等方面.在介绍Android开发过程中,异步处理这个常见的技术问题之前, ...

  5. CSharp 如何通过拼接XML调用存储过程来查询数据

    每查询数据,需要访问一次数据库,这样会影响性能:如果把查询的数据拼接成XML形式,作为一个参数整体传给存储过程来处理,这只访问数据库一次,执行速度会快很多. 1.C#代码如下: /// <sum ...

  6. win7下MariaDB10.0的my.ini配置文件的位置

    msi版本的,安装后在安装目录下的\data\my.ini 常用的配置选项: 1.修改默认的存储引擎 在配置文件my.ini(linxu下为my.cnf) 中的 [mysqld] 下面加入defaul ...

  7. VBA実績表

    VBA 插入一行保留样式 VBA 打开一个string指定的文件 VBA 按照文件类型名称打开一个文件 VBA excel中表示列的字母换成数字

  8. [转][工地][存]Oracle触发器死锁问题解决

    摘自http://blog.itpub.net/12932950/viewspace-607691/ 这两天一直在因为系统初期设计原因导致的一个触发器问题.问题如下:有表T,有客户编号.账户编号及地址 ...

  9. CryptAPI 数字签名 与 Openssl 验证签名

    这段时间要实现一个认证协议,分为客户端和服务器端,客户端使用windows操作系统,服务器端使用linux操作系统,在客户端下(windows),使用windows证书库中的签名证书对消息进行签名(使 ...

  10. TCP segment of a reassembled PDU

    Wireshark有时候会显示这个东东. 此处PDU是指上层(如HTTP)的Protocol Data Unit,意指上层协议的一个协议段太长,无法放入单个TCP数据包. 如果你在wireshark中 ...