css之absolute温习
1、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。(父元素不仅可以是相对定位(relative))
2、当绝对定位的元素找不到定位类型是非static定位的父元素时,即相对于根元素进行定位(根元素一般是html)
3、一般子元素设置为绝对定位,父元素需要设置为相对定位
4、absolute元素可以通过top,left,bottom,right进行重新定位元素位置。
5、对于absolute元素,top,left,bottom,right均为0,且width: 100%,height:100%时,则元素height确定,元素位置与top,left,bottom,right有关。
6、对于absolute元素,如果没有设置height,则真实height为子元素height的和,展示height为父元素的height-top-bottom(如果top或bottom缺失,则展示height也为子元素height的和)
7、对于absolute元素,如果设置了width: 100%或height:100%时,则真实height与展示height均为父元素的height(如果父元素也没有height的话,则为根元素height,即为html元素高度,即为屏幕高度)
8、也就是说,对于absolute元素,height没有值或height:100%时,其height都会和父元素height有关,但计算公式不同。
9、对于absolute元素,如果设置了height,则真实height和展示height为同一值。否则为不同值。
公式:
该元素的witdh = 父元素的width-left-right;
该元素的height= 父元素的height-top-bottom;
该元素位置(该元素left,该元素top);
css之absolute温习的更多相关文章
- CSS绝对定位absolute详解
转:https://www.jianshu.com/p/a3da5e27d22b 之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...
- css position: absolute、relative详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...
- css之absolute
一.absolute和float有相同的特性,包裹性和破坏性 1.absolute和float的相似(看下面的demo,如果图片在左上角,那么用float和absolute都一样) <!doct ...
- css position absolute 浮动特性
absolute的元素不会占据未浮动的元素的空间<html> <head> <style type="text/css"> .flipbox{ ...
- css position absolute相对于父元素的设置方式
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...
- css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))
借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...
- css之absolute绝对定位(技巧篇)
无依赖的绝对定位 margin,text-align与绝对定位的巧妙用法 例子1:实现左右上角的图标覆盖,如图,
- css之absolute绝对定位(绝对定位特性)
学习了绝对定位以后,对此进行一个总结,啦啦啦啦~ 绝对定位特性 1.破坏性 破坏了原有的位置,从文档流里脱离出来 2.包裹性 如果下面这种情况,父级元素将不会有高度和宽度,失去原有的大小
- css position:absolute 如何居中对齐
写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center
随机推荐
- linux 安装配置Jenkins
1.首先准备java环境,安装JDK 2.下载jenkins至Linux服务器 下载地址:https://wiki.jenkins-ci.org/display/JENKINS/Installing+ ...
- React-Native android 开发者记录
1.安装 安装步骤不多废话,按照官网步骤执行即可 安装完之后,react-native run-android发现报错,页面出不来 Error: Unable to resolve module `. ...
- html(),text(),var()区别与用法
text() 设置或返回所选元素的文本内容 html() 设置或返回所选元素的内容(包括HTML标记) val() 设置或返回表单字段的值 用html()效果把html标签也获取出来了: 用val() ...
- vue 树形下拉框 亲测 好用
https://vue-treeselect.js.org/ 顺带说一个开发中使用这个组件遇到的问题,关于回显之后无法修改的问题 找了很长时间 原因是数据类型导致的问题,数组里面应该是数字类型,直接 ...
- Linux学习之编译安装apache
疯狂吐槽腾某云..编译安装apache折腾了一下午..还是我不太熟练. 首先要先准备好安装apache的三个依赖包以及apache包.(一定要准备好!!折腾了一下午的小白握拳!!) -rw-r--r- ...
- Linode KVM安装Windows系统的设置方法
以前我们用老的Linode VPS主机的时候是采用的XEN架构的,如今我们新注册账户,以及新开的机器是KVM架构.根据后台的设置,我们看到好多网友有在LINODE中安装WINDOWS系统,理论上是可以 ...
- [并查集][NOIP2015]信息传递
信息传递 题目描述 有 N 个同学( 编号为 1 到 N) 正在玩一个信息传递的游戏. 在游戏里每人都有一个固定的信息传递对象, 其中,编号为i的同学的信息传递对象是编号为ti的同学. 游戏开始时, ...
- HDU 1520.Anniversary party 基础的树形dp
Anniversary party Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- luogu P1064|| 01背包||金明的预算
题目描述如下 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过 NNN 元 ...
- Numpy 数组属性
Numpy 数组的维数称为秩(rank),一维数组的秩为 1 , 二维数组的秩为 2 , 以此类推:在Numpy中, 每一个线性的数组称为是一个轴(axis),也就是维度(dimensios).比如说 ...