html中绝对定位的父级,【CSS学习笔记】绝对定位的父类参照物的确定
今天看CSS定位的课程,了解到一个元素要设置绝对定位,需要确定一个父类或者祖先类参照物,默认是根元素html。
这个默认根元素已经明确,但是祖先类元素参照物如何确定呢?
Just Try
首先,给出代码:
html部分
let's begin.
hello world!
css部分
#one {
background-color: lime;
outline: 2px dashed silver;
width: 50%;
}
#two {
background-color: yellow;
outline: 2px dashed gray;
width: 50%;
height: 75%;
}
#three {
background-color: orange;
outline: 2px dashed blue;
width: 50%;
height: 75%;
}
#four {
background-color: olive;
outline: 2px dashed;
width: 50%;
height: 75%;
}
#five {
background-color: lightblue;
outline: 2px dashed red;
width: 50%;
height: 75%;
}
显示如下:
第一步,给标记为four的div设置绝对定位
#four {
background-color: olive;
outline: 2px dashed;
width: 50%;
height: 75%;
position: absolute;
right: 5%;
top: 5%;
}
小结:可以看到four(后面直接将标记的id名称对应div元素)已经脱离原有的文档流,在他的父类元素three中不占用位置了。而它的参考物似乎就是浏览器视窗本身,也就是html的html元素这个默认的根元素,你看,它离浏览器视窗顶部和右部的距离是不是差不多都是视窗高度的5%,而且它自身的宽度、高度不也是分别为浏览器视窗的宽高的对应50%和75%么。
第二步,给one添加position: relative;属性声明
小结:这次four被限制到one的边框内了,而且宽高和top、right都自适应到了以one的尺寸为基准大小。所以说这个时候,one成了four绝对定位时的祖先元素参照物。
第三步,在第二步的基础上给two添加position: relative;属性声明
小结:唉,这次four却被two“擒获”了唉,怎么回事?没错,four做绝对定位的祖先参照物,是设置了相对定位且离four最近的那个祖先类元素。跟four最有“血缘关系”,four就会被这个最近的祖先类元素“捕获”。搂到怀里唉,掩面&羞涩。
第四步,测试一下第三步的结论,再给three添加position: relative;属性声明
小结:瞧!是不是?three是four的直接父元素,在one和two都已经设置position: relative;属性声明的前提下,three还是把four给捕获了。
但是!前面几部都是常规套路,如果“不走寻常路”(广告位招租)呢?
第五步,在第四步的基础上,将four的css规则中right的属性值改为负值呢?会有什么效果?
此时,four已经“一只脚跨出”了three的“势力范围”。
css代码如下
#four {
background-color: olive;
outline: 2px dashed;
width: 50%;
height: 75%;
position: absolute;
right: -25%;
top: 5%;
}
小结:一个元素A要设置绝对定位,离它最近的、设置了相对定位的祖先类元素B,就会“捕获”它。但是最终,作为后代元素的A也只是以B为参照物,也就是从B的位置“出发”,至于能去到哪里,则是由top/right/bottom/left属性来决定了。
看完以后学到了啥
哦,似乎只是知道了一个元素要设置绝对定位必须首先确定离它最近的、设置了相对定位的祖先元素作为参照物,然后就可以“背上行囊来一次说走就走的旅行了”(扇脸),应该是可以进行相对于参照物的位移了。
唠叨
至于为何要用前后的两个p元素和five,他们也都是作为我们实验的对照组啊。这里只用了对W3C标准支持得好的chrome内核的,360极速进行测试,其他浏览器下是什么测试情况有待考察。
此文本是,个人学习实践结果,作为学习笔记加深印象。其他初学者也许亦有些微帮助。
至此。
软件与环境
Windows 7 ultimate 64bit;
sublime text 3 + liveStyle;
360 chrome(内核版本45.0.2454.101),应该不是不很旧吧。
html中绝对定位的父级,【CSS学习笔记】绝对定位的父类参照物的确定相关推荐
- css中怎么加入立体模型,CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- 子级绝对定位,父级相对定位的由来 --- CSS定位
CSS定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子. 定位 = 定位模式 + 边偏移 . 定位模式用于指定一个元素在文档中的定位方式.边偏移则决定了该元素的最终位置. ...
- CSS学习笔记(学习中)
HTML 多媒体与语义化标签 图片标签 ........... 相对路径 相对路径:描述从网页出发,如何找到图片. <img src="images/gugong.jpg"& ...
- CSS学习笔记(跟随b站pink老师)
.CSS 一.CSS简介 1.1.CSS语法规范 使用HTML时,需要遵从一定的规范,CSS也是如此.熟练使用CSS对网页进行修饰,首先需要了解CSS样式规则. CSS规则由两个主要的部分构成:选择器 ...
- CSS学习笔记(狂神-完整版)
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
- CSS学习笔记(一) CSS基础+CSS3新特性
思维导图 文章目录 思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
- CSS学习笔记(详细)- 基础
CSS学习笔记从零开始 代码风格 样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器 基础选择器 标签选择器 类选择器 - 开发最常用 多类名 i ...
- HTML5 CSS学习笔记
最新前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程_哔哩哔哩_bilibili 代码地址:HTML5+CSS: 用于学习.练习前端的相关知识. 目录 HTML 1.html ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...
最新文章
- 在win ce中如何使正在运行的软件自动升级更新
- BZOJ3808 : Neerc2012 Labyrinth of the Minotaur
- poj 3038 Children of the Candy Corn bfs dfs
- Java IO 之 SequenceInputStream 原理解析
- 更改MFC生成的程序的默认exe图标
- arraylist可以存储不同类型吗_结构胶的种类多吗?不同的类型有哪些产品特性?...
- NUnit单元测试笔记
- 什么是3D打印?游戏建模具体怎么做?哪个更有发展
- 2022迅雷ios版下载beta
- curl 断点下载 wget下载
- html网站a标签直接下载pdf,不在浏览器打开
- 希捷 服务器文件丢失 原因,移动硬盘数据丢失的原因有哪些?如何进行专业的数据恢复?...
- 关于Qt bindValue函数出错问题
- masonry布局出现 'couldn't find a common superview for...报错解决办法
- linux挂载ntfs硬盘6,CentOS 6.2 挂载 NTFS格式的硬盘
- GeForce RTX 3090深度学习测评
- 阿里资深技术专家带你聊一聊——服务端的接口测试...
- Linux mmap 详解
- AXL经典作品推荐恋する乙女と守护の楯 恋爱少女与守护之盾
- 五类、超五类、六类跳线