css 之 position定位
position属性一共有4个值,分别是static、absolute、relative、fixed。
static为默认值,指块保持在原本应该在的位置上,即该值没有任何移动的效果。
absolute属性是参照浏览器的左上角,配合top、right、bottom、left进行定位,在没有设定top、right、bottom、left时,默认根据父级的坐标原点为原点。如果设定了top、right、bottom、left,并且父级没有设定position属性,那么当前的absolute则以浏览器的左上角为原点进行定位,位置将由这四个属性决定。
relative属性与absolute属性完全不同,子块则相对于其父块中它本来应该在的位置进行定位,同样采用top、right、bottom、left这4个属性配合。
fixed属性与绝对定位很类似,只不过固定定位时,元素会完全从文档流中去除,不会有相对于文档中任何部分的位置。
css 之 position定位的更多相关文章
- 归纳篇(一)CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- css元素position定位和z-index
网页元素定位 1.注意点: 1)给元素设定高度要小心,除非给已知大小的图片设置高度,否则无法得知指定元素在页面上会有多高.此时最好通过padding等来控制高度. 2)对于同一个元素,不要讲float ...
- 【CSS】position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- CSS使用position定位后导致元素浮动
1.子元素 absolute/fixed定位后,子元素脱离文档流存在,它让出原来占的那个坑,父元素再也不能通过子元素来撑开高度了 <style> div{ position:absolut ...
- css中position 定位的兼容性,以及定位的使用及层级的应用
一.首先我们来看看定位的兼容性,当然是在IE6.7但是现在大多数公司都已经不考虑了 我们就作为一个了解吧: 1.在IE67下,子元素有相对定位的话,父级的overflow:hidden包不住子元素 解 ...
- CSS——对position定位和margin-top的理解
一.常见定位方式 1.positon:absolute (脱离文档流) 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位 (这里的父元素是指定位方式为relative和abso ...
- css的position定位终极总结
relative相对定位是相对于自己的位置定位,absolute绝对定位是向上级一级一级搜索有position属性的div,如果没有找到就相对于body定位
- css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...
- position定位的小问题
css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...
随机推荐
- C盘扩容 更改C盘大小
最近对xamarin有点兴趣,虽然网上的评论嘘声一片, 对于只想试一试的心态来说,对于网上所说的什么开发后的程序卡顿,可以用的三方库很少等, 我只想说,你们说的我不信,我要试一试看 我本来已经安装了v ...
- bootmem API总结
bootmem_init()函数执行完成后,linux启动初期的bootmem分配器就初始化完成了,可以调用bootmem提供的API分配内存. 这些API在include/linux/bootmem ...
- P1605迷宫
题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和 终点坐标,问: 每个方格最多经过1次,有多少种从起点坐标到终点坐标的方案.在迷宫 中移动有上下 ...
- Linux命令之---ls
命令简介: ls(list)命令用来列出目标目录(缺省的话为当前目录)中所有的子目录和文件. 指令所在路径:/bin/ls 执行权限:All User 命令语法: ls [选项] [目录名] 命令参数 ...
- mongoTemplate学习笔记
mongoTemplate的andExpression表达式 Aggregation<Post> agg = Aggregation.newAggregation( Record.clas ...
- day23 Model 操作,Form 验证以及序列化操作
Model 操作 1创建数据库表 定制表名: 普通索引: 创建两个普通索引,这样就会生成两个索引文件 联合索引: 为了只生成一个索引文件,才 ...
- laravel5.2总结--邮件
laravel自带SwiftMailer库,集成了多种邮件API,支持多种邮件驱动方式,包括smtp.Mailgun.Maildrill.Amazon SES.mail和sendmail,Mailgu ...
- 【Set Matrix Zeros】cpp
题目: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. cl ...
- alert(1) to win部分解题
XSS在线习题分析 (https://alf.nu/alert1) 1. Warmup function escape(s) { return '<script>console.log(& ...
- jenkins忘记管理员登陆密码
配置文件的路径在.../jenkins/config.xml (线上路径是/usr/local/tomcat7/webapps/jenkins/config.xml) 修复办法:千万注意:修复前一定要 ...