绝对定位position: absolute;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
position: absolute;
相配合使用的属性分别有：
定位属性：left、right、top、bottom
堆叠顺序属性：z-index
定位属性是用来定位元素的位置的，四个方向可以设置位置；
堆叠顺序属性用来定义如果多个含有position属性的元素的堆叠顺序。
参照浏览器左上角，配合 top left right bottom（TLRB）进行定位，
1、在没有设定TLRB,默认依据父级的坐标原点为起始点
2、如果设定了TLRB,并且父级没有设定position属性，
那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定
3、如果设定了TLRB,并且父级设定position属性，
那么当前的absolute则以父级元素的左上角为原始点进行定位，位置将由TRBL决定
如果子元素没有设置TLRB,默认以及父级的坐标原点为起始点。
如果设定了TRLB，父级元素有定义position属性，则absolute的（0,0）位置在父级元素的左上角位置，位置由定位属性(TLRB)决定；
如果设定了TRLB，父级元素没有定义position属性，则absolute的（0,0）位置在浏览器的右上角位置，位置由定位属性(TLRB)决定。
所以谁absolute有随机性的，大多是因为没有注意到父级元素是否也定义过position属性 fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。*/
#parent{
position: absolute;
height: 200px;
width:200px;
border: 4px solid red;
background-color: #4cae4c;
margin-top:100px;
margin-left:100px; } #children{
position: absolute;
height: 20px;
width:60px;
border: 4px solid blue;
background-color: #761c19;
top:10px;
left: 50px;
}
</style>
</head>
<body style="margin: 0;padding: 0;background-color: gray">
<div id = 'parent'>
<div id="children"> </div>
</div>
</body>
</html>
绝对定位position: absolute;的更多相关文章
- 层模型--绝对定位(position:absolute)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接 ...
- IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...
- IE6 下绝对定位position:absolute 与浮动不显示 (IE6 下拉菜单显示)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD& ...
- 解决绝对定位div position: absolute 后面的<a> Link不能点击
今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...
- position absolute 绝对定位 设置问题
今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...
- position:absolute绝对定位解读
position:absolute绝对定位解读 摘要 用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...
- CSS绝对定位和相对定位 position: absolute/relative
absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...
- position:absolute，绝对定位和相对定位，JQ隐藏和显示
需要在指定位置,用绝对定位. 如果直接写position:absolute,top:0;left:0,那就是以浏览器的左上角为参照了 现在需要在某一个指定位置用绝对定位 解决方法 在需要用绝对定位(p ...
- IE6和IE7下绝对定位position：absolute和margin的冲突问题解决
绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...
随机推荐
- Linux程序编译链接动态库版本号的问题
不同版本号的动态库可能会不兼容,假设程序在编译时指定动态库是某个低版本号.执行是用的一个高版本号,可能会导致无法执行. Linux上对动态库的命名採用libxxx.so.a.b.c的格式.当中a代表大 ...
- 键值对操作 上（Spark自学五）
键值对RDD是Spark中许多操作所需要的常见数据类型. “分区”是用来让我们控制键值对RDD在各节点上分布情况的高级特性.使用可控的分区方式把常在一起被访问的数据放在同一个节点上,可以大大减少应用的 ...
- qml自学笔记------自己写相似于劲舞团的按键小游戏（中）
接上篇<qml自学笔记------自己写类似于劲舞团的按键小游戏(上)> 第三部分DisplayPart.qml 代码的其它部分都是渣,就这里花了点时间,整个小游戏就靠这个文件. 首先,屏 ...
- [TypeScript] Use the JavaScript “in” operator for automatic type inference in TypeScript
Sometimes we might want to make a function more generic by having it accept a union of different typ ...
- [iOS]在NavigationController中的ScrollView中的子视图都会下移64个像素
情况是这种: 我有一个UINavigationController,设置为self.window的root视图, 然后有一个UIVIewController是UINavigtionController ...
- javascript - 你不容错过的es6模板写法
/** * ``即重音符(128键盘左上角ESC下面那个键盘) * 隶属:模板字符串 */ let unit = '4'; let keywords = 'uc'; // step1:模板变量 ${v ...
- MySQL存储过程详解 mysql 存储过程(转)
mysql存储过程详解 1. 存储过程简介 我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的S ...
- Jmeter-安装及配置(一)
Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资源,例如静态文 ...
- Problem-1001：Sum Problem
Sum Problem Sample code : #include <stdio.h> int main() { int i,n; int sum; while(scanf(" ...
- 【MyBatis学习13】MyBatis中的二级缓存
1. 二级缓存的原理 前面介绍了,mybatis中的二级缓存是mapper级别的缓存,值得注意的是,不同的mapper都有一个二级缓存,也就是说,不同的mapper之间的二级缓存是互不影响的.为了更加 ...