【响应式Web前端设计】子元素absolute定位时父元素有无relative的区别

今天药忘吃喽~ 2022-10-15 11:58 108阅读 0赞

.father{ 
                width: 200px;
                height: 200px;
                background-color: red;
                margin:0 auto;
                /*position: relative;*/
            } .son{ 
                width: 50px;
                height: 50px;
                background-color: yellow;
                position: absolute;
                top: 10px;
                left: 10px;
            }

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

**父元素没有relative:**  
![在这里插入图片描述][20210525091419309.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70]  
**父元素有relative:**  
![在这里插入图片描述][20210525091529437.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70]

[20210525091419309.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70]: /images/20221014/09d3c3b6059d43be9b54e8c815634a2e.png
[20210525091529437.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70]: /images/20221014/8ea2cee2eeef4af0957d91bf2431221e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，108人围观）

还没有评论，来说两句吧...

相关阅读

相关子元素相对于父元素固定定位

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

ゞ浴缸里的玫瑰/ 2023年06月25日 03:09/ 0 赞/ 64 阅读

相关【响应式Web前端设计】CSS3伪类与伪元素的区别

首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 CSS中伪类与伪元素的概念是很容易混淆的,今天就来谈谈伪类与伪元素之间的区别伪类：用于向某些选择器添加

川长思鸟来/ 2022年11月14日 00:51/ 0 赞/ 127 阅读

相关【响应式Web前端设计】CSS 定位详解

文章目录 1 position 属性的作用 2 static 属性值 3 relative，absolute，fixed 3.1 relat

骑猪看日落/ 2022年11月14日 00:50/ 0 赞/ 224 阅读

相关【响应式Web前端设计】子元素absolute定位时父元素有无relative的区别

.father{ width: 200px; height: 200px;

今天药忘吃喽~/ 2022年10月15日 11:58/ 0 赞/ 109 阅读

相关 relative,absolute,static,fixed定位问题

在用CSS+DIV进行布局的时候，一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚，以致经常会出现让人很郁闷的结果。

小咪咪/ 2022年08月19日 08:36/ 0 赞/ 177 阅读

相关 html css样式子元素相对父级元素定位

废话不多说。父级元素样式设置： position:relative; 子元素样式： position: absolute; 这样就可以达到子

系统管理员/ 2022年05月23日 09:30/ 0 赞/ 321 阅读

相关布局：父元素适应子元素的高度

第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为０,因为floa

╰+哭是因爲堅強的太久メ/ 2022年05月20日 09:36/ 0 赞/ 258 阅读

相关父元素有transform样式则子元素fixed定位失效

项目中使用的下拉刷新是mint-ui的loadmore组件，该组件下拉时用的transform样式，导致fiexd定位失效了，原因只要position:fixed;元素的父

谁借莪１个温暖的怀抱￠/ 2022年01月31日 13:23/ 0 赞/ 514 阅读

相关 Vue怎么操作父元素、兄弟元素、子元素

<button @click = “getDom($event)”>点击</button> methods: { getDom(e) {

- 日理万妓/ 2021年09月24日 01:52/ 0 赞/ 1060 阅读

相关 css定位 absolute relative fixed

一.absolute 相对拥有absolute或者relative父级进行定位，也就是他会一直寻找自己父级是否有absolute或者relative属性，如果找到，选择最

迈不过友情╰/ 2021年06月10日 20:41/ 0 赞/ 388 阅读