插件窝 干货文章 关于页面元素的绝对定位和相对定位的一些理解

关于页面元素的绝对定位和相对定位的一些理解

定位 我们 相对 这个 254    来源:    2024-10-29

从今天开始要经常性的把一些小知识点整理一下了,可能有些很简单,不过应该是都能用得到的。

关于div的绝对定位和相对定位,这个是每一个搞前端的IT人员都会用到的,所谓绝对定位,就是这个东西就是在那里了,不管其他东西怎么动,我的位置不变,这个说好听点叫有气节,说不好听了叫耍无赖。当然一般使用绝对定位都是为了相对定位用的。这个就类似于黑帮收保护费,这一片归我管,那我里面的元素位置都是想对我而言的,和外界没有关系。说完绝对定位,来说一下相对定位,含有这个属性的元素就很没气节了,领导去哪我去哪,永远围着领导转。恩恩,扯这么多言归正传。

有些时候,我们需要在一个图层上面加点东西,但是在web页面里面不能像ps里面这么方便的添加。我们需要写一个div(或者其他容器)来存放我们这个图层里面的东西,然后把它放到我们想要放置的图层(div)内,将我们父层的style属性内的position设为absolute,最后将我们新建的div的style的position设为relative。这样我的层就会置于父层之上了。子层会有top bottom left right属性,通过上下左右我们可以定位我们的元素了。

有一点需要注意,如果你没有定义一个绝对定位层,那么你的相对定位就是相对整个页面而言的,一个大家常用的原型设计软件Axure RP就是全局的相对定位。其实Axure RP挺好用的。

天气转凉了,注意保暖。

                    <div class="clearfix">
                    <span id="art_bot" class="jbTestPos"></span>
                    </div>