position的相对位置和绝对位置

palljs001 2015-07-01 09:01:21

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

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

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

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

...全文

386 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

陌生的羁绊2014 2015-07-11

打赏
举报

.Html里一些标签里面不能放区块元素 <p> <div></div>  </p> 解决方法是什么？

palljs001 2015-07-09

打赏
举报

引用 4 楼 wuqinfei_cs 的回复:


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

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

qq_15153307 2015-07-02

打赏
举报

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

ningyb 2015-07-02

打赏
举报

引用 4 楼 wuqinfei_cs 的回复:


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

很到位，可以参考下

y362623206 2015-07-01

打赏
举报

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

forwardNow 2015-07-01

打赏
举报


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