父元素没有设置定位 position absolute 解析
1、示例代码
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>父元素没有设置定位 position absolute 解析</title>
<style type="text/css">
html {
border: 1px dashed green;
} body {
border: 1px dashed purple;
} #first {
width: 200px;
height: 100px;
border: 1px solid red;
position: relative;
} #second {
width: 200px;
height: 100px;
border: 1px solid blue;
position: absolute;
top: 0;
left: 0;
}
</style>
</head> <body>
<div id="first">relative</div>
<div id="second">absoult</div>
</body> </html>
效果：
2、结论
absoulte方式在父级没有设置定位方式时是以<html>作为原点定位。
父元素没有设置定位 position absolute 解析的更多相关文章
- 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？
前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...
- 相对于父元素的fixed定位的实现
问题描述 之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元 ...
- 38.html----相对于父元素的fixed定位的实现
之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元素跟着一起 ...
- css position absolute相对于父元素的设置方式
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- CSS(8)---通俗讲解定位(position)
CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流.浮动.定位.前面两个之前已经讲过,详见博客: 1.CSS(5)---通俗讲解盒子模型 2.CSS(6)---通 ...
- position:absolute实现垂直居中
一些图标通常要垂直居中 如下所示: 而css中没有直接的样式.需要我们自己调试. 我用了position:absolute;来实现. 要想使得position:absolute;有效,它的父元素必须也 ...
- 绝对定位常见误区：position:absolute相对于谁定位、及当溢出时怎么隐藏
1.绝对定位元素溢出父元素,怎么隐藏问题? 通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏! 但是,对于pos ...
- 父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动
一般情况: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...
随机推荐
- hihocoder #1071 : 小玩具
闻所未闻的$dp$神题(我不会的题) 令$f[S][i]$表示子集状态为$S$,且$S$中最大联通块恰好为$i$的方案数 考虑转移,我们枚举$S$中最小的元素$v$来转移,这样就能不重 $f[S][i ...
- mvc 从客户端 中检测到有潜在危险的 Request.Form 值
天往MVC中加入了一个富文本编辑框,在提交信息的时候报了如下的错误:从客户端(Content="<EM ><STRONG ><U >这是测试这...&qu ...
- <摘录>Gson对Java嵌套对象和JSON字符串之间的转换
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,具有良好的跨平台特性.近几年来已经和XML一样成为C/S架构中广泛采用的数据格式.有关JSON的更多知识, ...
- IOS常用的第三方开发库
开发几个常用的开源类库及下载地址: 1.json json编码解码2.GTMBase64 base64编码解码3.TouchXML xml解析4.SFHFKeychainUtils 安全保存用户密码到 ...
- TJU 2248. Channel Design 最小树形图
最小树形图,測模版.... 2248. Channel Design Time Limit: 1.0 Seconds Memory Limit: 65536K Total Runs: 2199 ...
- 使用IE9、FireFox与Chrome浏览WPF Browser Application(.XBAP)的方式
最近开始写一些WPF的小Sample和文章,但是毕竟WPF应用程式不像Silverlight那么方便的只要装个Plugin就可以透过浏览器来看执行结果,因此把脑筋动到了改用WPF Browser Ap ...
- SpringBoot添加支持CORS跨域访问
原文:https://www.jianshu.com/p/c6ea21b64f6e CORS(Cross-Origin Resource Sharing)"跨域资源共享",是一个W ...
- arcgis python图形信息
属性 说明 area 面要素的面积值:对于所有其他要素类型为空 centroid 如果质心位于要素之内或要素之上则为真:否则返回标注点(返回一个点对象) 范围 返回一个范围对象 firstPoint ...
- OpenGl的源程序，运行就提示，"计算机丢失 glut32.dll文件"
转自:http://www.cppblog.com/longzxr/archive/2009/12/04/102565.html?opt=admin 今天调试OpenGl的源程序,编译通过,但一运行就 ...
- redis主键失效机制
Memcached删除主键的方式与Redis有何异同 首先,Memcached 在删除失效主键时也是采用的消极方法,即 Memcached 内部也不会监视主键是否失效,而是在通过 Get 访问主键时才 ...