position的相对位置和绝对位置_html/css_WEB-ITnose-html教程-PHP中文网

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:41 AM

父容器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>

登录后复制

四楼的解释很到位，还有演示效果。
简单的说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>

登录后复制

很到位，可以参考下

<!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"使元素脱离了文档流，那么它的子元素也会脱离文档流吗？？？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7747

Java教程

1643

CakePHP 教程

1397

Laravel 教程

1291

PHP教程

1234

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。