css中的position定位

之前在我选择学前端的时候,其实没什么自学基础,初学前端时,我记得当时有个任务是很简单的把照片放到一个网页正中央,当时我弄这个花了1个多小时,对于css定位完全无厘头的我看了很多关于position定位的很多博客,才终于明白它的position布局都是如何实现的,现在我就给大家分享下我的学习理解

一、文档流布局

首先我们先来了解文档流布局,什么是文档流?这是百度比较全面官方的解释

将窗体自上而下分为一行行,并在每行中从左至右的排放元素,这就是文档流

其中,脱离文档流有三种方式,即为浮动float,绝对定位absolute,固定定位fixed

正常文档流布局

如上图所示,这就是正常的文档流,一个挨一个,第一行没位置了,再排下一行

二、position定位

这方面不懂的,大家也可以去http://www.3c页面去了解,相应的参数为如下:

absolute(绝对定位):相对于static以外的第一个父元素定位,分别用“left”“right”“top”“bottom”进行定位

relative(相对定位):相对其正常元素再进行定位,如“left:20”会先向left元素添加20像素

fixed(固定定位):相对于浏览器窗口进行定位

static(默认元素),按正常定位

inherit(继承):从父元素继承定位

relative——相对定位

最大的特点就是不脱离文档流!!什么意思??

效果如下:position:relative;left:-20px;top:20px;

position:relative定位效果

也就是说,它的原来位置还在,其他的元素位置也就不会因为它的改变而改变!!!

fixed——固定定位

相对于浏览器窗口而定位,效果如下:position:fixed;right:20px;top:20px;

position:fixed相对浏览器定位效果二

absolute——绝对定位

理解这个定位非常重要!!!下面请听我的详述!!!

由于它是对于除static元素的第一个父元素定位,试试它的父元素若为static会怎么样,也就是父元素什么定位都没有的情况下

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

实现效果如图:其中test2是test1的子元素,test3是test2的子元素


position:absolute效果一

发现,test2,test1正常定位,而test3的位置有点怪,为什么呢?给大家解释下,因为父元素若为static的话,它则是相对于文档而定位,大家不要以为是根据窗口而定位,这样就和fixed一样了,no,no,no!如果我们实现网页滑动,它是不会随着窗口滑动而往下滑的!!


若父元素为relative呢?代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: relative;left: 50px;top: 50px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: -20px;top: -20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>


效果如下:

position:absolute效果3


如图所示,test2相对于自身文档流中的位置发生了偏移,test3相对于test2发生了偏移

这个非常重要!它也就说明了如果给父元素定义为relative相对定位的时候,子元素再定义absolute绝对定位时,不会脱离文档流了!也就是说给父元素实现relative定位时,再实现absolute定位时就可以实现需要的位置了!!


父元素为fixed时,它的效果会怎么样?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: fixed;right: 20px;top: 20px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;left: -40px;top: 40px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

效果如下:

position:absolute效果4

由于test2的父元素为static,所有它的位置是相对于文档流而定位的,test3则相对于test2的位置在实现定位!!

如果父元素为absolute呢?情况又会如何?

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: absolute;right: 20px;top: 20px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

这时的效果图就是这样了

position:absolute效果5

test2先根据父元素test1先靠右,在实现定位,test3根据父元素test2先靠右,在实现定位!!


这就是css中我关于position定位的理解了,如果大家还有什么疑问可以自己再参考看看别人的博客......

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值