position的相对位置和绝对位置_html/css_WEB-ITnose-html tutorial-php.cn

position的相对位置和绝对位置_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:41:30

asal

1463 orang telah melayarinya

父容器relative时，子容器设置为absolute。

为什么子容器设置为absolute，父容器要设置为relative???

父元素和子元素都用Relative不行吗？？？

使用position 和使用float和margin有什么优缺点？？？

回复讨论(解决方案)

父容器设置为relative 子容器才会已父容器为基准来定位， relative只是相对于原来的位置进行偏移。

relative
absolute

float
margin

分别实现什么的？
写出来你的问题就破了

为什么子容器设置为absolute，父容器要设置为relative?
这个说法不严密
子容器设置为 absolute 时，父容器可以是 relative 也可以是 absolute

absolute 是父容器内的绝对定位
relative 是相对文档流默认位置的相对定位

<!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>

Salin selepas log masuk

四楼的解释很到位，还有演示效果。
简单的说postion属性是需要有参照物的，absolute是绝对定位，它自身会脱离文档流，不占用宽度和高度。一般绝对定位是需要定宽高的，不然内容不会显示。
而相对定位是需要占用宽高的。

<!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>

Salin selepas log masuk

很到位，可以参考下

<!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>

Salin selepas log masuk

谢谢，还想再请教下，如果一旦用了"absolute"使元素脱离了文档流，那么它的子元素也会脱离文档流吗？？？