首頁 >web前端 >css教學 >css固定定位

css固定定位

无忌哥哥原創: 2018-06-28 17:58:292543瀏覽

定位的四種模式:static,relative,absolute,fixed

定位的四個位置:left,right,top,bottom

定位屬性:position,有四種狀態值

1.static:靜態定位,按元素在文檔流中的順序排列,這是預設值,四個位置無效

2.relative:相對定位,元素相對於原來它在文檔流中的位置進行定位,四個位置有效

3.absolute:絕對定位,元素相對於它的定位父級定位,脫離文檔流,四個位置有效

#4.fixed:固定定位,與絕對定位類別類似,也脫離了文檔流,元素在頁面上的位置固定,不隨頁面滾動,四個位置有效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>4.固定定位</title>
    <style>
        body {
            /*将页面高度设置为2000px,使之出现垂直滚动条*/
            height:2000px;
        }
        .box {
            width: 200px;
            height: 260px;
            /*background-color: #6CF;*/
            /*固定定位fixed:元素脱离文档流,相对于窗口定位,固定在页面上,并且不随页面滚动*/
            /*可以当作是绝对定位的一个特例来看待*/
            position:fixed;
            top: 200px;
            left:50px;
        }
    </style>
</head>
<body>
<!--<div></div>-->
<!--以在线QQ客服为例进行演示-->
<div><img src="../images/qq.png" alt="" width="200"></div>
</body>
</html>

以上是css固定定位的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css Static position

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css絕對定位下一篇：css絕對定位

看更多