HTML学习笔记8——定位网页元素

最新推荐文章于 2023-07-06 14:04:01 发布

跃起的影子

最新推荐文章于 2023-07-06 14:04:01 发布

阅读量257

点赞数 1

分类专栏： HTML5 文章标签： html 学习 css

本文链接：https://blog.csdn.net/qq_45569406/article/details/126351734

版权

HTML5 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS中的三种定位方式：相对定位、绝对定位和固定定位。相对定位是相对于元素自身原来的位置偏移，不影响其他元素；绝对定位则相对于最近的已定位祖先元素或浏览器窗口定位，脱离标准文档流；固定定位类似，但始终相对于浏览器窗口，不会因滚动条移动。此外，还提到了z-index属性用于解决定位元素的层叠问题，以及在网页制作中的应用实例。

摘要由CSDN通过智能技术生成

定位

position属性
static：默认值，没有定位
relative：相对定位
absolute：绝对定位
fixed：固定定位

relative定位
相对自身原来位置进行偏移
偏移设置：top、left、right、bottom
规律：
1.设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
2.设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
3.设置相对定位的盒子原来的位置会被保留下来

案例：制作花样连接卡

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        /* body,ul, li, h1 {
	        padding:0px;
	        margin:0px;
        } */
        #course_list{
            border: 1px solid red;
            height: 300px;
            width: 300px;
        }
        #course_list::after{
            content: '';
            clear: both;
            display: block;
        }
        #course_list a{
            width: 100px;
            height: 60px;
            color: aliceblue;
            padding-top: 40px;
            text-decoration: none;
            background-color: pink;
            text-align: center;
            display: block;
        }
        #course_list a:hover{
            background-color: blue;
        }
        .a2, .a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="course_list">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

在这里插入图片描述

absolute定位
偏移设置： left、right、top、bottom
绝对定位规律：
1.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
2.如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
3.绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
4.元素位置发生偏移后，它原来的位置不会被保留下来
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况

#second {
	background-color:#CCF;
	border:1px #0000A8 dashed;
	position:absolute;
	right:30px;
}

fixed定位
偏移设置： left、right、top、bottom
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>fixed的使用</title>
    <style>
        body{
        height: 1000px;
        }
        div:nth-of-type(1) {  /*第一个div设置绝对定位*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2) {  /*第二个div设置固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

在这里插入图片描述

小结

相对定位的特性
相对于自己的初始位置来定位
元素位置发生偏移后，它原来的位置会被保留下来
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

绝对定位的特性
绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
元素位置发生偏移后，原来的位置不会被保留
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
设置绝对定位的元素脱离文档流
绝对定位的使用场景
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

固定定位的特性
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等