HTML+CSS入门 CSS Position定位属性
沉沙 2018-09-19 来源 : 阅读 737 评论 0

摘要:本篇教程介绍了HTML+CSS入门 CSS Position定位属性,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门 CSS Position定位属性,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

<

1. 介绍
1.1 说明

Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。
1.2 主要的值

①absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。

②relative :相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

③fixed :固定定位;类似于absolute,但不随着滚动条的移动而改变位置。

④static :默认值;默认布局。
1.3 辅助属性

position属性只是使元素脱离文档流,要想此元素能按照希望的位置显示,就需要使用下面的属性(position:static不支持这些):

①left : 表示向元素的左边插入多少像素,使元素向右移动多少像素。

②right :表示向元素的右边插入多少像素,使元素向左移动多少像素。

③top :表示向元素的上方插入多少像素,使元素向下移动多少像素。

④bottom :表示向元素的下方插入多少像素,使元素向上移动多少像素。

上面属性的值可以为负,单位:px 。如果是百分比,则以父容器为参照,但是,父级如果没有确定具体的高度,如果此时position为relative,top和bottom属性不起作用,比如:

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body {
        background-image: url("amazing-sky.jpg");
        background-position: center, center;
        background-size: cover;
    }
    
    /*html,body{
        height: 100%
    }*/
    
    #container {
        color: #ffffff;
        width: 100%;
        text-align: center;
        position: relative;
        bottom: 50%;
    }
    </style>
</head>


<body>
    <!-- <div id="container"> -->
        <div id="container">
            <h1>Let‘s Learn HTML5</h1>
            <p>发挥您的美感与想象力,探索Web开发的无限可能性,现诚邀您一同踏上HTML5的学习之路。</p>
            <a href="invite.php">邀您参加</a>
        </div>
    <!-- </div> -->
</body>


</html>

上例中container的父级为body,宽度默认为100%,高度虽然没有设置100%,所有top,bottom不起作用

 
2. position 定位方式
2.1 position:absolute
2.1.1 说明

绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。
2.1.2 视图



 
2.2 position:relative
2.2.1 说明

相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
2.2.2 视图



 
2.3 position:fixed
2.3.1 说明

固定定位;类似于absolute,但不随着滚动条的移动而改变位置。
2.3.2 视图


2.3.3 应用场景

①登录框覆盖层:如dz论坛的登录。

②虚假QQ消息广告。

 
2.4 position:static
2.4.1 说明

默认定位,表示此元素为默认定位方式。

 
3. 总结
3.1 滚动条是否出现

当含有position属性的元素为最边缘元素时:

①absolute 和 relative :含有此2个值的边缘元素,浏览器缩小到此元素不可见时,会出现滚动条。

②fixed :含有此值的边缘元素,浏览器缩小到此元素不可见时,不会出现滚动条。

 
3.2 示例
3.2.1 视图


 
<!DOCTYPE html>
<head>
    <title>position</title>
    <meta charset="UTF-8"> 
    <style type="text/css">
    div {
        height: 200px;
        width: 300px;
        border-color: Black;
        border-style: solid;
        border-width: 1px;
    }
    
    #a {
        position: absolute;
        left: 900px;
        top: 150px;
    }
    
    #b {
        position: relative;
        left: 500px;
        top: 100px;
    }
    
    #c {
        position: fixed;
        left: 970px;
        top: 400px;
    }
    
    #d {
        position: static;
        background-color: Window;
    }
    </style>
</head>


<body>
    <div id="a">
        div-a
        <br />     position:absolute;
        <br />     绝对定位
    </div>
    <div id="b">
        div-b
        <br />     position:relative;
        <br />     相对定位;不脱离文档流,只改变自身的位置,在文档流原先的位置遗留空白区域。
    </div>
    <div id="c">
        div-c
        <br />     position:fixed;
        <br />     固定定位;固定在页面中,不随浏览器的大小改变而改变位置。
    </div>
    <div id="d"></div>
    <input type="text" value="input1" />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>


</html>    

本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程