• css3-定位

    目录

    1.定位

    1.1 相对定位

    1.2 绝对定位

    1.3 固定定位

    1.4 z-index

    1.定位

    1.1 相对定位

    相对定位：positon：relstive；
    相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留

    top，right，left，bottom，是旧图相对于新图在哪个位置。因此，属性值为负的才代表往那个方向移动。

    测试代码：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    7.     <style>
    8.         body{
    9.             padding: 20px;
    10.         }
    11.         div{
    12.             margin: 10px;
    13.             padding: 5px;
    14.             font-size: 12px;
    15.             line-height: 25px;
    16.         }
    17.         #father{
    18.             border: 1px black solid;
    19.             padding: 0px;
    20.         }
    21.         #first{
    22.             background-color: #8EC5FC;
    23.             border: 1px orchid dashed;
    24.             position: relative;/*相对定位：上下左右*/
    25.             top: -20px;
    26.             left: 20px;
    27.         }
    28.         #second{
    29.             background-color: #E0C3FC;
    30.             border: 1px palegreen solid;
    31.             position: relative;
    32.             right: 20px;
    33.         }
    34.         #third{
    35.             background-color: bisque;
    36.             border: 1px orchid dashed;
    37.             position: relative;
    38.             bottom: -10px;
    39.         }
    40.     style>
    41. head>
    42. <body>
    43. <div id="father">
    44.     <div id="first">第一个盒子div>
    45.     <div id="second">第二个盒子div>
    46.     <div id="third">第三个盒子div>
    47. div>
    48. body>
    49. html>

    练习：

    代码实现：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>方块定位title>
    6.     <style>
    7.         #father{
    8.             width: 300px;
    9.             height: 300px;
    10.             padding: 10px;
    11.             border: 1px solid red;
    12.         }
    13.         a{
    14.             width: 100px;
    15.             height: 100px;
    16.             text-decoration: none;
    17.             background: pink;
    18.             line-height: 100px;
    19.             text-align: center;
    20.             color: whitesmoke;
    21.             display: block;
    22.         }
    23.         a:hover{
    24.             background: paleturquoise;
    25.         }
    26.         .two{
    27.            position: relative;
    28.             left: 200px;
    29.             top: -100px;
    30.         }
    31.         .four{
    32.             position: relative;
    33.             left: 200px;
    34.             top:-100px
    35.         }
    36.         .five{
    37.             position: relative;
    38.             left:100px;
    39.             top:-300px
    40.         }
    41.     style>
    42. head>
    43. <body>
    44. <div id="father">
    45.     <a href="" class="one">链接1a>
    46.     <a href="" class="two">链接2a>
    47.     <a href="" class="three">链接3a>
    48.     <a href="" class="four">链接4a>
    49.     <a href="" class="five">链接5a>
    50. div>
    51. body>
    52. html>

    1.2 绝对定位

    定位：基于xxx定位，上下左右~

    1）没有父级元素定位的前提下，相对于浏览器定位

    2）假设父级元素存在定位，我们通常会相对于父级元素进行偏移

    3）在父级元素范围内移动

    总结：相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

    测试代码：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <style>
    8.         body{
    9.             padding: 20px;
    10.         }
    11.         div{
    12.             margin: 10px;
    13.             padding: 5px;
    14.             font-size: 12px;
    15.             line-height: 25px;
    16.         }
    17.         #father{
    18.             border: 1px black solid;
    19.             padding: 0px;
    20.             position: relative;
    21.         }
    22.         #first{
    23.             background-color: #8EC5FC;
    24.             border: 1px orchid dashed;
    25.             position: relative;/*相对定位：上下左右*/
    26.         }
    27.         #second{
    28.             background-color: #E0C3FC;
    29.             border: 1px palegreen solid;
    30.             position: absolute;
    31.             right:100px ;
    32.             top: -10px;
    33.         }
    34.         #third{
    35.             background-color: bisque;
    36.             border: 1px orchid dashed;
    37.         }
    38.     style>
    39. head>
    40. <body>
    41. <div id="father">
    42.     <div id="first">第一个盒子div>
    43.     <div id="second">第二个盒子div>
    44.     <div id="third">第三个盒子div>
    45. div>
    46. body>
    47. html>

    1.3 固定定位

    position：fixed

    直接在某个位置固定不动了。（例如返回顶部，在右下角，随着鼠标都不动）

    测试代码：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>固定定位title>
    6.     <style>
    7.         body{
    8.             height: 1000px;
    9.         }
    10.         div:nth-of-type(1){
    11.             width: 100px;
    12.             height: 100px;
    13.             background: #E0C3FC;
    14.             position:absolute;
    15.             right: 0px;
    16.             bottom: 0px;
    17.         }
    18.         div:nth-of-type(2){
    19.             width: 50px;
    20.             height: 50px;
    21.             background: pink;
    22.             position: fixed;
    23.             right: 0px;
    24.             bottom: 0px;
    25.         }
    26.     style>
    27. head>
    28. <body>
    29. <div>div1div>
    30. <div>div2div>
    31. body>
    32. html>

    1.4 z-index

    类似于图层的层级概念

    图层-z-index：默认是0，最高无限~999

    页面布局：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <link rel="stylesheet" href="css/style.css">
    7. head>
    8. <body>
    9. <div id="content">
    10.     <ul>
    11.         <li><img src="images/a.jpeg" alt="">li>
    12.         <li class="tipText">学习cssli>
    13.         <li class="tipBg">li>
    14.         <li>时间：2099-01-01li>
    15.         <li>地点：月球一号基地li>
    16.     ul>
    17. div>
    18.  
    19. body>
    20. html>

    css样式：

    1. #content{
    2.     width: 505px;
    3.     padding: 0px;
    4.     margin: 0px;
    5.     overflow: hidden;
    6.     font-size: 12px;
    7.     line-height: 25px;
    8.     border: 1px black solid;
    9. }
    10. ul,li{
    11.     padding: 0px;
    12.     margin: 0px;
    13.     list-style: none;
    14. }
    15. /*父级元素相对定位*/
    16. #content ul{
    17.     position: relative;
    18. }
    19. .tipText,.tipBg{
    20.     position: absolute;
    21.     width: 380px;
    22.     height: 25px;
    23.     top:258px;
    24. }
    25. .tipText{
    26.     color: azure;
    27.     z-index: 999;
    28. }
    29. .tipBg{
    30.     background: #E0C3FC;
    31.     opacity:0.3;/*背景透明度*/
    32.     /*filter: Alpha(opacity=30);*/
    33. }

    最终效果：

  • 相关阅读:
    linux 配置 NTP 服务器
    使用 OpenTelemetry 构建 .NET 应用可观测性（2）：OpenTelemetry 项目简介
    ES6语法总结--上篇（基础篇）
    Gof23设计模式之状态模式
    2022金九银十 —— 招聘有感，给各位测试同学的一些建议
    动态链接库(一)--动态链接库简介
    CISSP-安全与风险管理
    指针和数组笔试题解析
    数据分析 - 概率计算
    HTML5 Web SQL: A Comprehensive Guide
  • 原文地址：https://blog.csdn.net/qq_61727355/article/details/126601880