欢迎光临
我的个人博客网站

【前端】CSS3学习笔记(五)——定位


✨课程链接

【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

✨学习笔记

默认情况

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style>         div{             margin: 10px;             padding: 5px;             font-size: 12px;             line-height: 25px;         }         #father{             border: 1px solid red;             padding: 0;         }         #first{             background-color: #0093E9;             border: 1px dashed yellow;         }         #second{             background-color: #80D0C7;             border: 1px dashed blue;         }         #third{             background-color: salmon;             border: 1px dashed green;         }     </style>  </head> <body>      <div id="father">         <div id="first">第一个盒子</div>         <div id="second">第二个盒子</div>         <div id="third">第三个盒子</div>     </div>  </body> </html> 

相对定位

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>  <!--    相对定位         相对于自己原来的位置 进行指定的偏移         相对定位的话 它仍然在标准文档流中 原来的位置会被保留         position: relative         top left bottom right; -->      <style>         body{             padding: 20px;         }         div{             margin: 10px;             padding: 5px;             font-size: 12px;             line-height: 25px;         }         #father{             border: 1px solid red;             padding: 0;         }         #first{             background-color: #0093E9;             border: 1px dashed yellow;             /*相对定位*/             position: relative;             top: -20px;             left: 20px;         }         #second{             background-color: #80D0C7;             border: 1px dashed blue;         }         #third{             background-color: salmon;             border: 1px dashed green;             position: relative;             bottom: -10px;             right: 20px;         }     </style>  </head> <body>  <div id="father">     <div id="first">第一个盒子</div>     <div id="second">第二个盒子</div>     <div id="third">第三个盒子</div> </div>  </body> </html> 

方块定位练习

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style>         #box{             width: 300px;             height: 300px;             padding: 10px;             border: 2px solid red;         }         a{             width: 100px;             height: 100px;             text-decoration: none;             background: salmon;             line-height: 100px;             text-align: center;             color: white;             display: block;         }         a:hover{             background: #0093E9;         }         .a2,.a4{             position: relative;             left: 200px;             top: -100px;         }         .a5{             position: relative;             left: 100px;             top: -300px;         }     </style>  </head> <body>  <div id="box">     <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> 

绝对定位

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>  <!--    绝对定位         基于xxx定位 上下左右         1. 在没有父级元素的情况下 相对于浏览器定位         2. 假设父级元素存在定位 相对于父级元素进行偏移         3. 在父级元素范围内移动         相对于父级或浏览器的位置 进行指定的偏移         绝对定位的话 它不在标准文档流中 原来的位置不会被保留 -->      <style>         div{             margin: 10px;             padding: 5px;             font-size: 12px;             line-height: 25px;         }         #father{             border: 1px solid red;             padding: 0;             position: relative;         }         #first{             background-color: #0093E9;             border: 1px dashed yellow;         }         #second{             background-color: #80D0C7;             border: 1px dashed blue;             /*绝对定位*/             position: absolute;             right: 30px;             top: -10px;         }         #third{             background-color: salmon;             border: 1px dashed green;         }     </style>  </head> <body>      <div id="father">         <div id="first">第一个盒子</div>         <div id="second">第二个盒子</div>         <div id="third">第三个盒子</div>     </div>  </body> </html> 

固定定位

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style>         body{             height: 1000px;         }         div:nth-of-type(1){             /*绝对定位 相对于浏览器*/             width: 100px;             height: 100px;             background: red;             position: absolute;             right: 0;             bottom: 0;         }         div:nth-of-type(2){             /*固定定位 fixed*/             width: 100px;             height: 100px;             background: yellow;             position: fixed;             right: 0;             bottom: 0;         }     </style>  </head> <body>      <div>div1</div>     <div>div2</div>  </body> </html> 

z-index及透明度

#content{     margin: 0;     padding: 0;     width: 200px;     overflow: hidden;     font-size: 12px;     line-height: 25px;     border: 1px black solid; } ul,li{     margin: 0;     padding: 0;     list-style: none; } /*父级元素相对定位*/ #content ul{     position: relative; } .tipText,.tipBackground{     position: absolute;     width: 200px;     height: 25px;     top: 140px; } .tipText{     color: white;     z-index: 999; } .tipBackground{     background: black;     /*背景透明度*/     opacity: 0.5;     /*注释:IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。*/ } 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>  <!--    z-index 默认是0 最高无限制-->      <link rel="stylesheet" href="css/style.css">  </head> <body>     <div id="content">         <ul>             <li><img src="images/1.jpg" alt=""></li>             <li class="tipText">图片一</li>             <li class="tipBackground"></li>             <li>时间:2021-07-07</li>             <li>地点:地球</li>         </ul>     </div> </body> </html> 

⭐转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:https://www.cnblogs.com/Flat-White/p/14983614.html

版权所有,如需转载请注明出处。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 【前端】CSS3学习笔记(五)——定位
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏