Home >Web Front-end >HTML Tutorial >Relative position and absolute position of position_html/css_WEB-ITnose
Relative position and absolute position of position_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:301478browse
When the parent container is relative, the child container is set to absolute.
Why should the child container be set to absolute and the parent container be set to relative???
Isn’t it okay to use Relative for both the parent element and the child element? ? ?
What are the advantages and disadvantages of using position and using float and margin? ? ?
Reply to discussion (solution)
Only when the parent container is set to relative will the child container be positioned based on the parent container. Relative is only relative to the original The position is shifted.
relative
absolute
float
margin
What do they implement respectively?
Just write it down and your problem will be solved
Why should the child container be set to absolute and the parent container be set to relative?
This statement is not strict
When the child container is set to absolute, the parent container It can be relative or absolute
absolute is the absolute positioning within the parent container
relative is the relative positioning relative to the default position of the document flow
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>有三种布局：1. 行布局（默认布局方式）；2. 列布局（使用float）；3. 定位布局（使用position）在定位布局中，需要搞清楚两个问题：1. 目标；2. 参照物。当使用绝对定位时，必须指定参照物，然后进行定位；而成为参照物的条件是：1. 是目标元素的父元素或祖先元素；2. position属性的值不能为static（默认值）。成为参照物的元素，其position属性值可以是 absolute、relative、fixed；其中relative是最常见的，因为将元素的position属性设置为relative，不会使该元素从标准的文档流脱离出来（也就是没什么影响）。<style type="text/css"> .relObj { position: relative; } .absObj { position: absolute; } .container {width: 300px; height: 200px; border: solid 1px gray; } .closeBtn {color: red; font-weight: bold; cursor: pointer; top: 1px; right: 1px; }</style><div class="container relObj"> <div class="closeBtn absObj">X</div></div></body></html> Four Lou's explanations were spot on and his demonstrations were effective.
Simply put, the postion attribute requires a reference object. Absolute is absolute positioning. It will break away from the document flow and does not occupy the width and height. Generally, absolute positioning requires a fixed width and height, otherwise the content will not be displayed.
Relative positioning requires width and height.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>有三种布局：1. 行布局（默认布局方式）；2. 列布局（使用float）；3. 定位布局（使用position）在定位布局中，需要搞清楚两个问题：1. 目标；2. 参照物。当使用绝对定位时，必须指定参照物，然后进行定位；而成为参照物的条件是：1. 是目标元素的父元素或祖先元素；2. position属性的值不能为static（默认值）。成为参照物的元素，其position属性值可以是 absolute、relative、fixed；其中relative是最常见的，因为将元素的position属性设置为relative，不会使该元素从标准的文档流脱离出来（也就是没什么影响）。<style type="text/css"> .relObj { position: relative; } .absObj { position: absolute; } .container {width: 300px; height: 200px; border: solid 1px gray; } .closeBtn {color: red; font-weight: bold; cursor: pointer; top: 1px; right: 1px; }</style><div class="container relObj"> <div class="closeBtn absObj">X</div></div></body></html> Very good, you can refer to it
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>有三种布局：1. 行布局（默认布局方式）；2. 列布局（使用float）；3. 定位布局（使用position）在定位布局中，需要搞清楚两个问题：1. 目标；2. 参照物。当使用绝对定位时，必须指定参照物，然后进行定位；而成为参照物的条件是：1. 是目标元素的父元素或祖先元素；2. position属性的值不能为static（默认值）。成为参照物的元素，其position属性值可以是 absolute、relative、fixed；其中relative是最常见的，因为将元素的position属性设置为relative，不会使该元素从标准的文档流脱离出来（也就是没什么影响）。<style type="text/css"> .relObj { position: relative; } .absObj { position: absolute; } .container {width: 300px; height: 200px; border: solid 1px gray; } .closeBtn {color: red; font-weight: bold; cursor: pointer; top: 1px; right: 1px; }</style><div class="container relObj"> <div class="closeBtn absObj">X</div></div></body></html> Thank you, I would like to ask again, if "absolute" is used to make an element out of the document flow, will its child elements also be out of the document flow? ? ?