html消除绝对定位的影响,css怎么清除绝对定位？

在网页制作的过程中，经常会使用绝对定位position:absolute来定位元素实现布局。那么，若想取消定位，应该怎么操作呢？下面本篇文章举例讲解一下CSS如何清除定位position。

新建一个html文件，命名为test.html，用于讲解CSS如何清除定位position。

在test.html文件内，使用div标签创建一个模块，并设置其class为con，主要用于下面通过该class来设置css样式。

在test.html文件内，在div内，再创建一个div模块，并设置其class为pos。

在css标签内，设置类名为con的div的样式，使用width属性设置div的宽度为300px，使用height属性设置div的高度为200px，使用background属性设置div的背景颜色为红色，定位属性position设置为相对定位(relative)。

在css标签内，设置类名为pos的div的样式，使用width属性设置div的宽度为100px，使用height属性设置div的高度为100px，使用background属性设置div的背景颜色为粉红色，定位属性position设置为绝对定位(absolute)，同时，使用left和top属性设置div距离左边30px，距离顶部10px。

在css标签内，再创建一个类名为clearpos的样式，将position属性设置为static，即清除定位属性，凡是添加了该类名样式，都会清除定位。将此类名添加到div为pos的模块上，清除它的定位。

在浏览器打开test.html文件，查看实现的效果。

更多web前端知识，请查阅 HTML中文网！！

html消除绝对定位的影响,css怎么清除绝对定位？相关推荐

html中绝对定位如何写,CSS如何进行绝对定位
absolute属性表示绝对定位,通过top.left.bottom.right值来设置它们相对于最近的祖先元素的位置 [推荐课程:CSS教程] 绝对定位元素的位置与文档流无关,因此它不占据任何空间. ...
html消除绝对定位的影响,CSS 绝对定位 ,浮动,清除浮动
首先: 我们需要知道div元素(块级元素)独占一行 box1 box2 如下图所示,box1和box2独占一行,可见如果每个div都独占一行,我们根本无法进行布局,所以我们就需要绝对定位和浮动来帮助我 ...
html消除绝对定位的影响,css定位常用属性 CSS清除定位position
css中定位position有哪几个属性值? absolute,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位: 元素的位置通过 "left", &quo ...
css为什么要用浮动_css浮动的特性，与浮动带来的影响以及如何清除浮动
块元素在文档流中默认垂直排列,所以多个div从上至下依次排开如果希望块元素在页面中水平排列,可以使用float来使元素浮动,从而脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动 css浮动 ...
DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先: 一.并排在一行的两个div样式有这种情况:ie或者ff下对于子 ...
css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
[css] 如何清除在项目中无用的css代码呢？
[css] 如何清除在项目中无用的css代码呢? 1.IDE中,会对没有使用到的样式,自己进行检测,删除时候,还需要手动删除. 2.webpack中,有基于消除无用css的插件(purifycss-w ...
html在一行内横向排列并排同行同时显示两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
01/23/2014, Posted in 移动 Comments: No comments 最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属 ...

html消除绝对定位的影响,css怎么清除绝对定位？

html消除绝对定位的影响,css怎么清除绝对定位？相关推荐

最新文章

热门文章