CSS定位

最新推荐文章于 2024-07-16 15:22:30 发布

q269399361

最新推荐文章于 2024-07-16 15:22:30 发布

阅读量451

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/hucblog/article/details/64920014

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

fixed固定定位

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动，固定定位的元素将会脱离文档流。

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        .fixed-div {
            background-color: green;
            height: 30px;
            width: 100%; /*设置fixed后,宽度默认为0了，这里要手动设置宽度*/
            position: fixed;
            top: 0px;
        }
    </style>
</head>
<body>
    <div class="fixed-div">
    </div>
    <!--撑爆第一屏，使浏览器有竖向滚动条-->
    <div style="height:2000px;">
        设置div高度来生成浏览器滚动条,<br /><br />或者这里可以使用<a href="http://cn.lipsum.com/"><b>Lorem ipsum</b></a>生成占位文字
    </div>
</body>
</html>

relative相对定位

相对定位元素的定位是相对其正常位置，相对定位的元素不会脱离文档流，相对定位元素经常被用来作为绝对定位元素的容器块。

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        .relative-div {
            background-color: ghostwhite;
            height: 200px;
            width:200px;
            /*内联元素横向居中*/
            text-align:center;
            /*内联元素竖向居中*/
            line-height:200px;
            /*相对定位*/
            position:relative;
            top:-200px; /*当前正常位置离浏览器顶部是200个像素，所以相对正常位置的-200刚好是在浏览器顶部*/
            left:500px;
        }
    </style>
</head>
<body>
    <div style="width:200px;height:200px;background-color:green;"></div>
    <div class="relative-div">这个div将进行相对定位</div>
    <!--相对定位不脱离文档流,所以还是占着位置的-->
    <div style="width:200px;height:200px;background-color:red;"></div>
</body>
</html>

absolute绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:绝对定位的元素将会脱离文档流。

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        p {
            background-color: #ffd800;
        }
        /* parent1父元素不进行相对定位 */
        .parent1 {
            background-color: #cbc2c2;
            height: 300px;
        }

        .child1 {
            background-color: #00ff90;
            width: 150px;
            height: 150px;
            position: absolute; /*最近没有定位的父元素，所以直接针对html*/
            top: 0px; /*从top0可以看出来*/
            left: 200px;
        }
        /* parent2父元素进行相对定位 */
        .parent2 {
            background-color: #827b7b;
            height: 300px;
            position: relative;
        }

        .child2 {
            background-color: #4cff00;
            width: 150px;
            height: 150px;
            position: absolute; /*最近有定位的父元素，所以直接针对parent2*/
            top: 0px; /*从top0可以看出来*/
            left: 200px;
        }
    </style>
</head>
<body>
    <p>与浏览器顶部留些距离</p>
    <p>与浏览器顶部留些距离</p>
    <p>与浏览器顶部留些距离</p>
    <p>与浏览器顶部留些距离</p>
    <p>与浏览器顶部留些距离</p>
    <div class="parent1">
        <div class="child1"></div>
        <br />
        <p>观察是否脱离文档流</p>
    </div>
    <div class="parent2">
        <div class="child2"></div>
        <br />
        <p>观察是否脱离文档流</p>
    </div>
</body>
</html>

内联和块状元素居中

居中可以参考：http://www.cnblogs.com/moqiutao/p/4807792.html

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        .parent1, .parent2 {
            width: 200px;
            height: 200px;
            background-color: #b6ff00;
            margin: 10px auto;
        }

        .parent1 {
            text-align: center; /*横向居中*/
            line-height: 200px; /*竖向居中*/
        }

        .d {
            background-color: red;
            width: 100px;
            height: 100px;
            margin: 0 auto; /*横向居中*/
            position:relative;
            top:50%;
            transform: translateY(-50%); /*竖向居中*/
            -ms-transform: translateY(-50%); /*竖向居中(针对IE不支持css3做的调整)*/
        }
    </style>
</head>
<body>
    <div class="parent1">
        <span>内联横竖向居中</span>
    </div>
    <div class="parent2">
        <div class="d">块状横竖向居中</div>
    </div>
</body>
</html>