dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1115|回复: 0

[Html/Css] css的position属性

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3987

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3987

    发表于 2020-4-12 22:00:05 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    Html css position属性
    position属性把元素放置在一个静态的,相对的,绝对的,或则固定的位置中.
    1,第一个属性absolute,绝对定位
    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>定位</title>
        </head>
        <style>
        /*绝对定位*/
     
        div.pos_abs{
            position:absolute;
            left:100px;
            top:150px;
            width:200px;
            height:200px;
            background-color:black;
            color:white;
            text-align:center;
        }
        div{
            border:2px solid black;
        }
        </style>
        <body>
            <div class="pos_abs">
                这是一个绝对定位的盒子
            </div>
            <div>
                通过绝对定位,元素可以放置在页面上的任何位置,下面的黑色盒子距离页面左侧100px,距离页面顶部150px.
            </div>
        </body>
    </html>

    1.png

    我们 可以改一下第二个div class="pos_abs"的width:500px和height:500px,会发现绝对定位盒子的位置始终不会改变,会在第二个div的内部.

    2.png

    2,第二个属性fixed:固定定位元素,相对于浏览器窗口进行定位
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>定位</title>
        </head>
        <style>
        /*定位*/
     
        div.pos_abs{
     
            /*下面是一个基于static的绝对定位*/
            /*position:absolute;*/
     
            /*下面是一个基于浏览器窗口的固定定位*/
            position:fixed;
            left:100px;
            top:150px;
            width:200px;
            height:200px;
            background-color:black;
            color:white;
            text-align:center;
        }
        div{
            border:2px solid black;
            width:500px;
            height:500px;
        }
        </style>
        <body>
            <div class="pos_abs">
                这是一个固定定位的盒子
            </div>
            <div>
                通过fixed固定定位,元素可以放置在页面上的任何位置,下面的黑色盒子距离浏览器窗口左侧100px,距离浏览器窗口顶部150px.当我们滚动页面时,黑盒子和浏览器窗口的相对位置不会发生任何变化.
            </div>
            <div>此盒子用来撑开页面高度</div>
            <div>此盒子用来撑开页面高度</div>
        </body>
    </html>

    用两个盒子撑开页面高度,当我们使页面向下滚动的时候,会发现fixed固定的黑盒子,始终以浏览器窗口为参照,固定在页面上.
    3,relative 生成相对定位的元素,相对于其正常位置进行定位。
    下面我只给css样式,代码不在重复写了

    [HTML] 纯文本查看 复制代码
    div.pos_abs{
     
            /*下面是一个基于static的绝对定位*/
            /*position:absolute;*/
     
            /*下面是一个基于浏览器窗口的绝对定位*/
            /*position:fixed;
            left:100px;
            top:150px;*/
     
            /*下面是一个相对定位*/
            position:relative;
            left:-20px;
            top:-10px;
            width:200px;
            height:200px;
            background-color:black;
            color:white;
            text-align:center;

    在浏览器中打开可以看到,黑色盒子的一部分已经到了页面外部,盒子相对于它原来该有的位置进行位置的调整.
    4,另外还有两个属性static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
    inherit:规定应该从父元素继承 position 属性的值(static和inherit不是很常用)
    5,一个常用的组合"子绝父相",子盒子采用绝对定位(absolute),父盒子用相对定位(relative),将子盒跟父盒子的相对位置绑定

    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>定位</title>
        </head>
        <style>
        /*定位*/
     
        div.pos_relative{
     
            /*下面是一个基于static的绝对定位*/
            /*position:absolute;*/
     
            /*下面是一个基于浏览器窗口的绝对定位*/
            /*position:fixed;
            left:100px;
            top:150px;*/
     
            /*下面是一个相对定位*/
            position:relative;
            left:20px;
            top:10px;
            width:500px;
            height:500px;
            background-color:black;
            color:white;
            text-align:center;
        }
        div.pos_abs{
            position:absolute;
            left:50px;
            top:70px;
            border:2px solid black;
            width:200px;
            height:200px;
            background: white;
            color:black;
        }
        div{
            width:500;
            height:500px;
            border:2px solid black;
        }
        </style>
        <body>
            <div class="pos_relative">
                这是一个定位的父盒子
                <div class="pos_abs">
                (子盒子)子盒子会跟着父盒子一起变动,通过子绝父相,将两盒子的相对位置绑定.
                </div>
            </div>
            
            <div>此盒子用来撑开页面高度</div>
            <div>此盒子用来撑开页面高度</div>
        </body>
    </html>





    2.png
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-12-23 15:21 , Processed in 0.084598 second(s), 36 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表