子元素设置absolue,不设置top以及left值会有什么影响呢?
代码如下:
.parent {
  width: 500px;
  height: 500px;
 
  overflow: hidden;
}
.children {
  width: 200px;
  height: 200px;
  position: absolute;
}
<div class="parent">
  <div class="children"></div>
</div>
结果图:
1.此时给children 添加一行样式,margin:10px;
样式如图:
2.将添加的样式去掉,给parent 添加一行样式:padding:10px;
样式如图:
3.将添加的样式去掉,给children添加样式:top:0;left:0;
样式如图:
总结:
说明子元素如果不设置top以及left,会受父元素padding的影响以及自身margin的影响,所以需要一个给定值;同样设置 top: inherit;left:inherit;或者top:inital;left:inital;也不起作用,这个就不用多说了。。。

css子元素添加绝对定位,不添加top、left会有影响吗???的更多相关文章

  1. CSS子元素设置margin-top作用于父容器?

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  2. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  3. 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响

    原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...

  4. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  5. CSS子元素居中(父元素宽高已知,子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  6. CSS子元素margin-top对于父元素的影响

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码如下 <styl ...

  7. 前端学习 --Css -- 子元素的伪类

    :first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...

  8. css子元素的margin-top为何会影响父元素

    详细内容请点击 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出 ...

  9. CSS 子元素选择器

    所有选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp 1)子元素选择器 参考链接:http://www.w3school.com. ...

随机推荐

  1. 缓存穿透,缓存雪崩,热点key及解决办法

    1.穿透 穿透:频繁查询一个不存在的数据,由于缓存不命中,每次都要查询持久层.从而失去缓存的意义. 解决办法: 持久层查询不到就缓存空结果,查询时先判断缓存中是否exists(key) ,如果有直接返 ...

  2. Fork/Jion框架详解

    ◆Fork/Jion框架可以干什么◆ 如果你要处理1万条数据,但是你的能力暂时还不够,一个简单快捷的办法就是你可以把每次只处理100条,等到处理100次之后再把所有的结果聚合起来你就处理完了这1万条数 ...

  3. [Inside HotSpot] hotspot的启动流程与main方法调用

    hotspot的启动流程与main方法调用 虚拟机的使命就是执行public static void main(String[])方法,从虚拟机创建到main方法执行会经过一系列流程.这篇文章详细讨论 ...

  4. 新DevOps八荣八耻

    昀哥 20181001以随时可扩容可缩容可重启可切换机房流量为荣,以不能迁移为耻. 以可配置为荣,以硬编码为耻. 以系统互备为荣,以系统单点为耻. 以交付时有监控报警为荣,以交付裸奔系统为耻. 以无状 ...

  5. python --- 基数排序算法

    基数排序的方式可以采用LSD,由键值的最右边开始,适用于数值整数.或者MSD,由键值的最左边开始,适用于字符串整数.在LSD基数排序中每一次的处理都是将关键字按顺序放置在其各自的称为桶的数据结构中,而 ...

  6. 【重学计算机】机组D4章:存储系统

    1. 存储系统层次结构 主存速度缓慢的原因:主存增速与CPU不同步,执行指令期间多次访问主存 主存容量不足的原因: 存在制约主存容量的技术因素:如由CPU.主板等相关技术指标规定了主存容量 应用对主存 ...

  7. .NET Core微服务之基于Polly+AspectCore实现熔断与降级机制

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.熔断.降级与AOP 1.1 啥是熔断? 在广义的解释中,熔断主要是指为控制股票.期货或其他金融衍生产品的交易风险,为其单日价格波动幅度 ...

  8. ResDrawableImgUtil【根据图片名称获取resID值或者Bitmap对象】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 根据图片名称获取项目的res/drawable-xxdhpi中相应资源的ID值以及bitmap值的封装类. 效果图 代码分析 根据图 ...

  9. 深入Go的底层,带你走近一群有追求的人

    目录 缘起 自我介绍的技巧 硬核知识点 什么是plan9汇编 汇编角度看函数调用及返回过程 汇编角度看slice 正确参与Go夜读活动的方式 阅读原文 上周六晚上,我参加了"Go夜读&quo ...

  10. python小技巧01递归解释内嵌

    现假设有一份机器人配件名单 list[头部,躯干,肢体] 头部这个list又有鼻子眼睛嘴巴这些小零件 肢体这个list有胳膊,肩膀,手.手这个list又有3种手指 所以这个list详细写出是: lis ...