《定位》

最新推荐文章于 2024-07-04 16:37:43 发布

2301_740097890

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量37

点赞数

文章标签：前端 java html

本文链接：https://blog.csdn.net/2301_76892837/article/details/129437443

版权

概念：让元素去某一个位置，位置的改变，去到任意一个你指定的位置

属性：position

取值：

static——————静态定位，元素正常显示（默认值）

relative——————相对定位，相对于自己原来的位置进行位置的改变。参照物是自己原来的位置。

absolute——————绝对定位

父子关系中：

1、如果父元素没有定位，此时子元素绝对定位，参照物是浏览器窗口第一屏幕（保证页面有滚动条）

2、如果父元素有定位，此时子元素绝对定位，子元素位置改变，参照物是父元素。父元素通常使用的定位是相对定位，称之为父相子绝。父元素只要有定位即可（不是静态定位就可以）

fixed——————固定定位，参照物就是浏览器窗口

sticky——————粘性定位，用来实现吸顶效果，参照物是距离最近的带有滚动条的容器

位移属性：

元素定位后，需要配合位移属性才能更改元素的位置

top/right/bottom/left

位移属性取值为正数，向元素正中心方向移动；位移属性取值为负数，向元素四周发散方向移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style: none;
        }
        .box{
            width:1200px;
            height:600px;
            border:2px solid gray;
            margin:0 auto;
        }
        .list{
            width:300px;
            height:600px;
            background-color: pink;
            float: left;
            /* 添加定位 */
            position: relative;
        }
        .box .rig{
            width:900px;
            height:600px;
            background-color: palegreen;
            float: left;
        }
        .box .list li{
            height:60px;
            line-height:60px;
            text-align: center;
            border:1px dashed red;
            box-sizing: border-box;
            /* 添加定位 */
            /* position: relative; */
        }
        .box .list li div{
            width:900px;
            height:600px;
            /* background-color: cyan; */
            position: absolute;
            top:0;
            left:300px;
            display: none;
        }
        .box .inner1{
            background-color: cyan;
        }
        .box .inner2{
            background-color: purple;
        }
        .box .inner3{
            background-color: orange;
        }
        .box .list li:hover div{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 左侧 -->
        <ul class="list">
            <li>手机
                <div class="inner1"></div>
            </li>
            <li>电脑
                <div class="inner2"></div>
            </li>
            <li>电视
                <div class="inner3"></div>

            </li>
            <li>耳机</li>
            <li>健康/儿童</li>
            <li>健康/儿童</li>
            <li>健康/儿童</li>
            <li>健康/儿童</li>
            <li>健康/儿童</li>
            <li>健康/儿童</li>
        </ul>
        <!-- 右侧 -->
        <div class="rig"></div>
    </div>
</body>
</html>

2301_740097890

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《定位》

2、如果父元素有定位，此时子元素绝对定位，子元素位置改变，参照物是父元素。sticky——————粘性定位，用来实现吸顶效果，参照物是距离最近的带有滚动条的容器。1、如果父元素没有定位，此时子元素绝对定位，参照物是浏览器。relative——————相对定位，相对于自己原来的位置进行位置的改变。static——————静态定位，元素正常显示（默认值）fixed——————固定定位，参照物就是。absolute——————绝对定位。概念：让元素去某一个位置，位置的改变，去到任意一个你指定的位置。
复制链接

扫一扫