这几天在慕课上看视频学习,偶然听到几个老师都说:CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位,如果要想相对当前元素的父元素来定位,父元素一定要设置position:relative。注意,前面一句是没有问题的,在没有父元素设置定位的话,默认就是以body来定位的,但是后面一句,要想相对父元素定位,父元素必须设置相对定位(relative),根据我的开发经验和查阅相关资料确认后发现,这是不对的。

正确的理解姿势是:

相对定位:相对于块级元素(或行内块)自身位置进行定位;

绝对定位:绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的(默认是body);

注意css描述的绝对定位概念,没有说明是离他最近的一个已相对定位的盒子进行定位的,所以离他最近的盒子的定位可以是相对定位(relative)和绝对定位(absolute)的,但是在开发中,一般是父盒子设置相对定位的,但是不代表只能是相对定位,举个栗子:

HTML:

1 <div class="father">
<div class="son"></div>
</div>

CSS:

 .father{
width: 300px;
height: 300px;
background-color: orange;
position: absolute;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -150px;
}
.son{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left:;
top:;
}

.father元素绝对定位是相对body的,这个没问题,主要看.son元素,他自身设置绝对定位,父元素.father也有绝对定位,你觉得这个子元素会相对body定位还是父元素来定位呢?

结果为:子元素是相对于有绝对定位的父元素来定位的,而不是body;

CSS中的绝对定位(absolute)误区的更多相关文章

  1. css中的绝对定位和相对定位(详解,总结)

    css中的绝对定位和相对定位(详解,总结) 总结: 设置绝对定位或者相对定位后都从文档中浮起来了,区别是相对定位还占着原来的位置,绝对定位不占着原来的位置,可以种z-index来改变元素的浮动的堆叠次 ...

  2. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  3. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  4. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  5. CSS中position的absolute和relative用法

    static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过z-index属性定义.绝对定位的元 ...

  6. 怕忘记了CSS中position的absolute和relative用法

    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...

  7. (转)CSS中的绝对定位与相对定位定位

    层级关系为: <div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<d ...

  8. CSS中的绝对定位与相对定位

    层级关系为:<div ----------- position:relative; 不是最近的祖先定位元素,不是参照物<div----------没有设置为定位元素,不是参照物<di ...

  9. [原创] css中的绝对定位和相对定位

    我对博客的认识是:记录问题,解决问题,分享知识.如果有轮子,我不需要造轮子.   首先,定位无论是相对定位还是绝对定位,必须有一个参考项,而这个参考项,专业术语称之为 包含块,这里的包含块是指在定位时 ...

随机推荐

  1. iOS12适配指南

    1.重复文件报错 build Phases-> 删除多余的info.plist 2.library not found for -lstdc++ 苹果在XCode10和iOS12中移除了libs ...

  2. java检索文件时加入线程

    package xianChengSaomiao; import java.io.File; import java.util.ArrayList; import java.util.List; pu ...

  3. Firefly 其他博客

    http://www.cnblogs.com/9miaoshetuan/tag/Firefly/ http://www.cnblogs.com/9miaoshetuan/p/3853124.html ...

  4. 小程序 的 textarea 组件 层级问题如何解决

        像这样的   既然是定位(脱离文档流),为啥不加层级关系,层级关系不明确,很容易出现显示异常,给遮罩加z-index:10,弹出框加z-index:11 即可 解决方案参考: https:// ...

  5. bin和sbin区别

    据说这个目录结构是沿袭unix的,不大清楚. bin是binary的缩写,是可执行的二进制文件./bin里面一般是基本的,大家都要用的工具:sbin里面的s是system的意思,是供system ad ...

  6. DDL语句--改动表

    改动表是指改动数据库中已经存在的表的定义.改动表比又一次定义表简单.不须要又一次载入数据.也不会影响正在进行的服务. MySQL中通过ALTER TABLE语句来改动表.改动表包含改动表名.改动字段数 ...

  7. (总结)Linux下su与su -命令的本质区别

    http://www.uplook.cn/index-Index-show-view15192.html大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能 ...

  8. 前端资源管理工具sourcetree

    https://www.sourcetreeapp.com/

  9. 【Android】Architecture Components最佳实践--Lifecycles

    UI controllers (activities and fragments) 中代码越少越好,不应该自己去请求数据,而是用ViewModel来更新数据,并且监听LiveData来更新UI UI ...

  10. 王兴内部讲话:为什么中国To B企业都活得这么惨

    本文节选自美团创始人王兴内部讲话.在讲话中,王兴罕见地分享了他对全球和中国宏观经济的理解,谈了他对 TO B 业务的深度思考.全文近 15000 字,干货非常多,值得你花时间阅读. 我们今天讲一下餐饮 ...