CSS定位position

最新推荐文章于 2022-08-01 10:46:00 发布

原创最新推荐文章于 2022-08-01 10:46:00 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

9 篇文章

订阅专栏

本文深入解析CSS中各种定位方式的特性和应用，包括静态、绝对、相对、固定及黏性定位，同时介绍如何使用transition属性实现平滑过渡效果。

(一：把元素拿起来)
position:;定位属性
作用：设置或者是检索元素得定位方式

(二：确定参照物)

1：position:static; [静态定位] position属性得默认值。
2：position:absolute; [绝对定位]
参照物：已经添加定位的父元素。
特点:
- a：如果父元素都没有定位，或者是没有父元素参照物是整个文档。
- b: 脱离文档流，不再占据空间。
3：position:relative; [相对定位]
参照物：相对于自身默认的位置为参照物
特点：
- a: 不会脱离文档流，占据空间。
- b: 一般给绝对定位提供参照物的。
4:position:fixed; [固定定位]
参照物：浏览器窗口
特点：
- a:脱离文档流，不占据空间
5:position:sticky [黏性定位]
原理：position:relative; 和 position:fixed；结合体
当添加黏性定位的元素，没有超出浏览器窗口的时候，执行的是position:relative; 当元素超出浏览器窗口执行的是position:fixed;

(三：固定坐标)

left属性
right属性
top属性
bottom属性值

transition属性（过渡）
属性值：

参与过渡的属性（默认的为all）
时间（过渡的时间 s ms）
延迟时间 s ms
运动的类型 linear(匀速)

注：transition必须通过事件触发，如 :hover

运动类型：贝塞尔曲线https://cubic-bezier.com/#.33,1.84,.47,-0.88
 .box{
        width:500px;
        height:300px;
        background:orange;
        transition:all 3s cubic-bezier(.33,1.84,.47,-0.88);
    }
    .box:hover{
        background:blue;
        width:1000px;
    }

rgba 让背景色、文本颜色…透明

opacity属性：( IE浏览器低版本不能识别 )
属性值：  0  -  1  数值    0.5半透明

兼容IE写法：
fliter:alpha(opacity=100);

.box{
        width:400px;
        height:300px;
        background:orange;
        font-size:40px;
        opacity:0.3
    }

让一个元素在浏览器窗口左右上下居中的方法：

     1：
        position:fixed;
        left:50%;
        top:50%;
        margin:-高度一半 0 0 -宽度一半

    2：
        position:fixed;
        left:0;right:0;
        top:0;bottom:0;
        margin:auto;
例   *{
        margin:0;
        padding:0;
    }
    img{
        display:block;
    }
    .box{
        width:300px;
        height:200px;
        background:pink;
        /* position:fixed 固定定位 */
        /* position:fixed;
        left:50%;
        top:50%; */
        /* 用margin让元素往左走自身宽度一半、往上走高度一半 */
        /* margin:-100px 0 0 -150px; */
        position:fixed;
        left:0;right:0;
        top:0;bottom:0;
        margin:auto;
    }

锚点：超链接的一种

<标签 id="id名称"></标签>
<a href="#id名称"></a>

在一个页面内容实现不同位置的跳转。
例 <head>
   <style>
    span{
        font-size:30px;
        font-weight:bold;
        color:red;
    }
    p{
        font-size:26px;
    }
</style>
 </head>
<body> 
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容<span id="back">你快回来</span>内容内容内容内容内容内容内容</p>  
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
 <a href="#back">返回顶部</a>
 </body>

锚点实现楼层跳转

<style>
    *{
        margin:0;
        padding:0;
    }
    div{
        width:100%;
        height:802px;
        text-align: center;
        line-height:802px;
        font-size:80px;
        color:#fff;
        font-weight:bold;
    }
    #box1{
        background:orange;
    }
    #box2{
        background:pink;
    }
    #box3{
        background:#d00;
    }
    #box4{
        background:#dd0;
    }
    #box5{
        background:#000;
    }

    p{
        width:40px;
        height:300px;
        position:fixed;
        left:0;
        bottom:100px;
    }
    p a{
        display:block;
        width:40px;
        height:40px;
        background:gray;
        text-align: center;
        line-height:40px;
        color:#fff;
        font-weight:bold;
        margin-bottom:10px;
    }
</style>
 </head>
<body>
<div id="box1">div1</div>
<div id="box2">div2</div>
<div id="box3">div3</div>
<div id="box4">div4</div>
<div id="box5">div5</div>
<p>
    <a href="#box1">F1</a>
    <a href="#box2">F2</a>
    <a href="#box3">F3</a>
    <a href="#box4">F4</a>
    <a href="#box5">F5</a>
</p>
</body>