定位position（前面布局无法实现
文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
定位：
1、relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
2、absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
3、fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
4、static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
伪代码如下:
......
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10 /* 将元素层级设置为10 */
定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
|
相对定位 |
绝对定位 |
固定定位 |
默认没有定位 |
|
relative |
absolute |
fixed |
static |
|
参照自己 |
参照父元素,父元素需要设置relative |
参照浏览器 |
|
|
移动之后原先的位置还在 |
脱离文档流,不占位置 |
脱离文档流,不占位置 |
|
定位position（前面布局无法实现相关推荐
- CSS基础——定位 (position)【学习笔记】
定位(position) 1. CSS 布局的三种机制 网页布局的核心 -- 就是用 CSS 来摆放盒子位置. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流.浮动和定位,其中: 普通流 ...
- CSS——CSS定位※ ( position )
文章目录 定位(position) 为什么要用定位? 元素的定位属性 静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 1.父级没有定位 2.父级有定 ...
- 前端基础入门之css定位 position
定位的简介 需求分析 按照我们之前所学知识,可以怎么实现呢? 应该来说不难,很容易实现 .box2 {width: 200px;height: 200px;background-color: yell ...
- css-05--1. 定位2.. 网页布局总结3.元素的显示与隐藏
目录 1. 定位 1.1 为什么需要定位 1.2 定位组成 1. 定位模式 2. 边偏移 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定位 abso ...
- css布局-浮动、定位、flex布局
1.CSS布局 - 什么是网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 - 标准流(文档流/普通流)排版方式 标准流(文档流/普通流) -标准流(文档流/ ...
- CSS定位position总结（超详细哦！）
文章目录 前言 一.定位(position) 介绍 1.为什么使用定位 2.定位组成 二. 定位模式 (position) 1.边偏移(方位名词) 2.定位模式介绍 1.1 静态定位(static) ...
- web前端入门学习 css（6）（定位position）（元素的显示与隐藏display、可见性visibility、溢出overflow）（案例：土豆播放页）
文章目录 什么是定位? 定位组成(定位模式+边偏移) 定位模式static relative absolute fixed 边偏移 定位模式--静态定位static(平时用不到)就是标准流 定位模式- ...
- 前端开发_HTML5_盒子定位(position)
盒子定位(position) 1.引入 我们知道浏览器在解析html页面的时候是按照标准的文档流方式就行解析的.即html页面元素是按照从左到右.自上而下的方式进行排布(我们可以这样认为,整个页面是一 ...
- html消除绝对定位的影响,css定位常用属性 CSS清除定位position
css中定位position有哪几个属性值? absolute,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位: 元素的位置通过 "left", &quo ...
- 定位--position属性
一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right botto ...
最新文章
- JAVA防盗链在报表中的应用实例
- leetCode C++ 二分查找 35. 搜索插入位置 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。
- 使用Windows Mobile Device Center进行手机的同步
- 该项目不在桌面中删除不了_win7系统桌面上的文件删不掉怎么办
- Oracle %rowtype的用法
- GetSystemInfo()
- php yii2 获取表里最大的id_Yii2中自带分页类实现分页
- shader飞线改进版
- 大数据 自学视频资料，纯分享
- datetime报错 sql脚本_SQLSERVER 中datetime 和 smalldatetime类型分析说明
- 闲来无事，画个佩奇可好？
- 超实用：小团队如何从零搭建一个自动化运维体系？
- nyoj 114某种排序（水 大数+优化大数）
- ADT公司G729 方案指标
- 异步操作及定时任务框架quzrtz在donet平台的使用
- vtuber面部捕捉工具_Live2D纸片人出道？VTuber工具VUP了解下
- 项目3-分数类中的运算符重载
- 助力危化运输升级 欧曼一体化解决方案再写山东危化安全运输新篇
- snmp v3 参数_snmp v3的安全配置 snmp认证与加密配置（53）
- ajax前后端通信的头部消息之请求头与响应头