定位：：：

最新推荐文章于 2024-08-20 19:23:57 发布

可爱的奥特曼

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量77

点赞数

文章标签： html css3 css

本文链接：https://blog.csdn.net/a123003005/article/details/121220993

版权

本文深入探讨了CSS中的定位技术，重点介绍了相对定位和绝对定位的概念及应用。通过示例代码展示了如何使用`position`属性设置元素的位置，解释了`top`、`bottom`、`left`和`right`边偏移的作用。同时提到了颜色透明度的表示方法`rgba()`和`opacity`属性的影响。此外，还讨论了`position:fixed`在实现固定位置布局中的用法。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>定位</title>
       <style>
           *{ /* 通配符 */
               padding:0;
               margin:0;
           }
           .bigbox{
               /* 相对定位:相对于自身的位置偏移 */
               /* position: relative;
               top:150px;
               right:100px; */
               /* 绝对定位:相对于有定位的父盒子来偏移,如果所以
               父盒子都没有定位,就相对于body(网页)来偏移 */
               /* 大相小绝/子绝父相 */
               position:absolute;
               top:150px;
               right:100px;
               width:800px;
               height:800px;
               border:5px dotted orangered;
           }
           .bigbox div{
               width:200px;
               height:200px;
           }
           .box1{
               background-color: aqua;
           }
           .box2{
               background-color: rosybrown;
           }
           .box3{
               background-color: cornflowerblue;
           }
       </style>
   </head>
   <body>
   
   <div class="bigbox">
       <div class="box1"></div>
       <div class="box2"></div>
       <div class="box3"></div>
   </div>
   </body>
</html>

颜色透明度：rgba（红色，绿色，蓝色，透明度）

opacity：0—1 ；透明度，所以子元素都会被透明。

固定位置：position:fixed; 以网页偏移

可爱的奥特曼

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>定位</title> </head> <body> ...
复制链接

扫一扫