absolute位置用法html,html/css中相对定位relative和绝对定位absolute的用法
一、相对定位(position:relative)
1、相对定位:将盒子的position属性设置为relative;可通过left、top、right、bottom设置偏移量。
相对定位基础用法示例:
我们先在页面设置两个div盒子(第一个红色;第二个蓝色)
最初的位置
我们将第一个盒子进行相对定位;离左边200px;离顶部50px;
得到的效果是;
得出结论:
1、红色盒子是相对于盒子最初的位置向左偏移200px,向下偏移50px;
2、盒子偏移后也不会影响其他盒子;偏移后最初的位置会留下一个占位的。
二、绝对定位(position:absolute)
absolute用法示例:
1、我们设置一个div盒子box{设置好高度、边框和离页面顶部的距离};里面还装有两个小盒子,第一个红色,第二个蓝色;
最初的位置
然后我们让第一个红色盒子设置绝对定位属性{left:100px;top:100px;}
效果图如下:
结论:1、绝对定位的盒子,最初的位置不会再占用,后面的盒子会填上空缺;
2、在父元素(也就是大盒子box)没有position属性时,子元素(红色盒子)是以屏幕为参照物进行位置的定位的;
从上面所说,我们在大盒子box设置一个position属性时看看有没有什么不同的效果:
得到的效果是:
由此可见:如果父元素有position属性时;他就会以父元素为参照物进行偏移;当然如果父元素没有position这个属性,他就会一级一级往上找,
绝对定位相对于的位置偏移是发生在上层元素上是否有position这个属性,如果没找到,就相对于整个屏幕。
补充说明:z-index可以设置层叠的置(绝对定位和相对定位都可以用),越大越在上层。(例如:z-index:1000;)
absolute位置用法html,html/css中相对定位relative和绝对定位absolute的用法相关推荐
- 微信小程序 位置定位position详解,相对定位relative,绝对定位absolute相关问题
一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...
- 相对定位relative、绝对定位absolute、固定定位fixed
注:默认情况下的定位是 postion:static: 使用定位时,常常使用偏移量对位置进行描述:left.right.top.bottom 定位时,使用z-indent可以元素的堆叠顺序,例:z-i ...
- 相对定位(relative),绝对定位(absolute),固定定位(fixed)
一.绝对定位 position:absolute 绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含 ...
- 相对定位 relative 和 绝对定位 absolute
1.absolute:绝对定位,相对最近父元素,原有空间不保留会被其他元素挤占.宽度为文本宽度,且宽度不会影响父元素宽度2.relative:相对定位,相对自身原来位置,原有空间保留,不会被挤占.宽度 ...
- css中相对定位和绝对定位
css中相对定位和绝对定位 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现 ...
- CSS中,position的绝对定位和相对定位的区别
CSS中,position的绝对定位和相对定位的区别 1.position的四个值:static.relative.absolute.fixed 绝对定位:absolute和fixed统称为绝对定位 ...
- CSS中相对定位与绝对定位
绝对定位: absolute, fixed 相对定位: relative 默认值: static <!DOCTYPE html> <html><head><m ...
- css中的定位以及绝对定位和相对定位的区别
一:绝对定位 (position: absolute) 绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是 ...
- css中clear:both属性的理解及用法
css中clear:both属性的作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时在设置清除浮动便可解决这一问题,可以认为,设置了clear:both的当前元素会把前边元素中设有浮动 ...
- css中 media的用法,如何在css中正确使用@media
如何在css中使用@media作为特定分辨率?所以我想让我的侧栏更改取决于用户分辨率,所以我使用@media.如何在css中正确使用@media 这是示例代码: @media (max-width: ...
最新文章
- 微软为什么从 C/C++ 转向了 Rust?
- python 调用linux命令-Python调用Linux bash命令
- Zabbix监控httpd服务
- java t没有缩进,Github上Java Eclipse项目的奇怪缩进
- #pragma comment(linker,/SECTION:shared,RWS)
- [转] TF-IDF与余弦相似性的应用(三):自动摘要
- UVa1586 - Molar mass
- [转载]MySQL各类SQL语句的加锁机制
- 31篇文章!计算机视觉从原理到OpenCv实战
- JavaScript(第二十二天)【动态加载js和css】
- javascript call and apply
- java 设计模式的相似_聊聊Java中几种常用的设计模式
- ISO 37301:2021《合规管理体系 要求及使用指南》国际标准解读及相关标准
- CAD无吊顶画弱电点位图总结
- PS PR AI AE LR AU LR ID 下载资源,简单安装,多种方式下载
- 基于阿里云产品和开源Hudi结合
- 小程序下划线和删除线的操作
- BVH with SAH (Bounding Volume Hierarchy with Surface Area Heuristic)
- CodeForces-1138A
- 打造国内专业企业研发管理解决方案,ONES完成华创资本领投A+轮600万美元融资