【CSS】定位

最新推荐文章于 2024-07-10 23:34:24 发布

lzb0995

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量28

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_71500484/article/details/132151025

版权

定位

位移的四个方向
默认值
绝对定位
相对定位
粘性定位
实例分析：
粘性定位实例
- 结构
- 样式

位移的四个方向

top；距离上方位移
bottom；距离下方位移
left；距离左边位移
right;距离右边位移

默认值

position:static;

根据普通流的排列方式进行排列；

普通流：就是
1.块级元素独占一行，从上到下排列;
2.行内元素会按照顺序从左到右排序，碰到父元素边缘自动换行。

绝对定位

position:absolute；

(绝对定位：脱离文档流；脱离文本流)

父级无定位的情况下根据窗口进行定位
父级有定位的情况根据父级位置定位

相对定位

position:relative;

(相对定位：没有脱离文档流，相对于原本自身位置定位)

当没有设置偏移量时，保持原来位置不变
根据自身先前在的位置进行位移；

粘性定位

position:sticky;

根据父级的边框位置进行判断；
当没达到偏移量要求时，是在保持原位置不动
当达到偏移量时，是固定定位；

实例分析：

最终实现，鼠标浮动在哪个按钮上，图片随之变化；
在这里插入图片描述

思路分析

    1.定义一个大盒子，设置居中效果；
    2.上部分选项使用无序列表制作，去圆点，选项左浮， 列表居中
    3.下半部分使用div盒子，高=大盒子高-上部分(需和选项部分为子父关系)
    4.图片统一设置宽、高、居中，定位在一起
    5.设置鼠标浮动后的图片优先级

结构：

<!--最外层的盒子-->
<div id="father">
	<!--选项部分-->
        <ul>
            <li>图片1</li>
            <li>图片2</li>
            <li>图片3</li>
            <li>图片4</li>
            <!--清除浮动-->
            <p style="clear: both;"></p>
            <!--下半部分-->
            <div id="son">
                <img src="../../Saved Pictures/wallhaven-x8x823.jpg" alt="">
                <img src="../../Saved Pictures/wallhaven-z8jgej.jpg" alt="">
                <img src="../../Saved Pictures/wallhaven-exy7vr.jpg" alt="">
                <img src="../../Saved Pictures/wallhaven-l8m3r2.jpg" alt="">
            </div>
        </ul>
    </div>

样式：

*{
    margin: 0;
    padding: 0;
}
<!--设置大盒子属性-->
#father{
    width: 800px;
    height: 600px;
    border: 1px solid gray;
    margin: 0 auto;
}
<!--设置选项的属性-->
li{
    text-align: center;
    box-sizing: border-box;
    width: 150px;
    height: 50px;
    line-height: 50px;
    border: 1px solid rebeccapurple;
    list-style: none;
    float: left;
}
<!--设置选项部分的居中-->
#father>ul{
    margin: 0 auto;
    width: 600px;
    height: 50px;
}
<!--设置图片盒子的属性-->
#son{
    width: 800px;
    height: 550px;
    border: 1px solid red;
    position: relative;//设置相对定位，使居中，因为其为 ul 的子类，所以图片盒子的左边实际与选项的左边处于对齐状态，不在大盒子的中间
    left: -100px;
}
<!--设置图片属性-->
img{
    padding: 125px 200px;
    position: absolute;//设置绝对定位
    width: 400px;
    height: 300px;
}
<!--设置鼠标浮动效果-->
#father>ul li:nth-child(1):hover~div>img:nth-child(1),
#father>ul li:nth-child(2):hover~div>img:nth-child(2),
#father>ul li:nth-child(3):hover~div>img:nth-child(3),
#father>ul li:nth-child(4):hover~div>img:nth-child(4),
#son img:hover{
	<!--设置权重值-->
    z-index: 5;
}

粘性定位实例

直接设置粘性定位的属性值；
需要注意父盒子也需要设置宽高属性；
图片插不进来

结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./Viscidity3.css">
</head>
<body>
	<!--仅设置了宽高，背景颜色，可以 更直观的感受粘性定位的特点-->
    <div id="QI"></div>
    <!--设置了粘性的盒子-->
    <div id="NX">
        <img src="../../Saved Pictures/屏幕截图 2023-08-07 150057.png" alt="">
    </div>
</body>
</html>

样式

*{
    margin: 0;
    height: 0;
}
<!--设置了父盒子的宽高，插入了背景图片-->
body{
    width: 100%;
    height: 5000px;
    background-image: url(../../day4/img/wallhaven-x8x823.jpg);
}
<!--粘性定位盒子之前的一个块，代表内容-->
#QI{
    width: 100%;
    height: 500px;
    background-color: aquamarine;
}
<!--设置了粘性定位，当该盒子的顶部与窗口的顶部距离0px的时候固定-->
#NX{
    position:sticky;
    top: 0px;
}
<!--图片的宽高；仅代表内容-->
img{
    width: 100%;
    height: 100px;
}

lzb0995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【CSS】定位

2.行内元素会按照顺序从左到右排序，碰到父元素边缘自动换行。(相对定位：没有脱离文档流，相对于原本自身位置定位)最终实现，鼠标浮动在哪个按钮上，图片随之变化；1.块级元素独占一行，从上到下排列;(绝对定位：脱离文档流；当没有设置偏移量时，保持原来位置不变。需要注意父盒子也需要设置宽高属性；根据普通流的排列方式进行排列；根据自身先前在的位置进行位移；直接设置粘性定位的属性值；
复制链接

扫一扫