子元素设置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. winfrom 改变图片透明度 Alpha

    效果图: 核心代码: /// <summary> /// 方法一 设置图像透明度 /// </summary> /// <param name="srcImag ...

  2. centos7 ambari2.6.1.5+hdp2.6.4.0 大数据集群安装部署

    前言 本文是讲如何在centos7(64位) 安装ambari+hdp,如果在装有原生hadoop等集群的机器上安装,需要先将集群服务停掉,然后将不需要的环境变量注释掉即可,如果不注释掉,后面虽然可以 ...

  3. Kubernetes 笔记 10 Job 机器人加工厂

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...

  4. VS Code实用技能1 - 代码折叠、面包屑

    VS Code实用技能 VS Code实用技能1 - 代码折叠.面包屑 一.代码折叠 ubuntu ctrl + shift + { ctrl + shift + } ctrl + k , ctrl ...

  5. 一个简洁的小H车调运模型

    一个简洁的小H车调运模型 不久前, 帝都B城市到处都是小H车, 理想的小H车应该是布朗运动\均匀分布,可是现实上它们就是不均匀.于是有如下问题: 观察帝都 HD区SY村区域,将其划分成10个用车点,用 ...

  6. MySQL性能基准测试对比:5.7 VS 8.0

    本文由云+社区发表 作者:数据库 版权声明:本文由腾讯云数据库产品团队整理,页面原始内容来自于severalnines英文官网,若转载请注明出处.翻译目的在于传递更多全球最新数据库领域相关信息,并不意 ...

  7. Powershell:关于PSCustomObject你想知道的一切(译)

    PSCustomObject是Powershell里非常重要的一个工具,我们先从基础开始然后再循序渐进讲到一些更高级的话题.PSCustomObject旨在于用简单的方法来创建结构化数据.下面的第一个 ...

  8. eclipse中集成maven

    一.环境 eclipse mar jdk 1.7 apache-maven-3.3.3 注意: 1> eclipse mar 已集成maven插件,我们只需要配置成自己的maven即可,类似ec ...

  9. 折腾Java设计模式之访问者模式

    博客原文地址:折腾Java设计模式之访问者模式 访问者模式 Represent an operation to be performed on the elements of an object st ...

  10. js实现复制文本内容到剪切板

    function copyUrl() { var Url2=document.getElementById("url").innerText; var oInput = docum ...