css子元素添加绝对定位,不添加top、left会有影响吗???

子元素设置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;也不起作用,这个就不用多说了。。。

原文地址:https://www.cnblogs.com/sunflower-zy/p/9448647.html

时间: 2024-08-07 17:32:45

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

子元素要绝对定位时,父元素应该怎么办?

昨天做练习时,遇到了这个问题: 如果子元素设置绝对定位(absolute),父元素需要设置相对定位(relative),否则子元素就不知道会飘到哪去了. 但总觉得还是没搞清楚,就去百度了,得到了一些见解,以下: 一.表 实现子元素在父元素中的绝对定位必须满足以下两个条件: 1.父元素要有相对定位属性(position:relative), 2.子元素设置绝对定位(position:absolute),并且同时加四个方向(top,bottom,left,right)的任意方向的属性值 <!DOCT

CSS子元素浮动之后如何撑开父元素

(1)在浮动子元素后面添加 <div style="clear:both;"></div> (2)父元素CSS添加 z-index:1; overflow:hidden; (3)绝对定位/静止定位(absolute/fixed); (4)父元素也跟着浮动 (5)父元素设定高度 (6)最佳方案: 父元素CSS添加: overflow:auto;_height:1%;

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

1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 300px; border: 1px solid red; } #div1 p { width: 100px; height: 100px; background-color: green; /*float: left; !*如果设置了浮动,则自动居中就会失效.*!*/ margin: 0 auto;

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

:first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序: :first-of-type 寻找指定类型中的第一个子元素 :last-of-type 寻找指定类型中的最后一个子元素 :nth-of-type 寻找指定类型中的指定子元素 可以使用even,来找到偶数的子元素 可以使用odd,来找到奇数的子元素 demo: <!DOCT

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

<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; width:50px; height:50px; //宽高可以不写 } </style> <div class="container"> <div class=&quo

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

详细内容请点击 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然是CSS2.1盒模型规范……虽然很别扭,非常别扭的规定.  问题如下图,两层Div结构,Outer Div属性为“margin:0 auto”,本该紧贴外框顶部的,如果没有Inner Div,或者没有Inner Div的“margin-top”属性,一切如预期.但是当Inner Di

css 子元素设置float,父元素高度塌陷

以div元素为例.div元素的高度会通过内容自动撑开.也就是说,内容有多少,高度就有多高.但是当内部元素设置了float属性之后,会是父元素高度塌陷 <div class="container"> <p>Hello World!Hello World!</p> <div class="clearfix"></div> </div> 清除浮动的方法 父元素底部添加空div,然后在添加属性clear

css子元素父元素之 父元素未定义宽度。

css代码: /* CSS Document */ .a { height:100px; background:#ff0; } .b { background:#000; width:50px; height:50px; }  html代码: <div class="a"> <div class="b"> </div> </div> </body> 显示效果: 发现:会出现父元素的宽度占满屏幕. css代码

[CSS] 子元素垂直居中的两种方式

1. 多个子元素水平并排,IE10以下失效 1 display: flex; 2 align-items: center; 3 justify-content: center; 2.多个子元素竖直排列,这种方式会导致margin失效,IE8以下失效 1 display: table-cell; 2 vertical-align: middle;