设为首页收藏本站
联系我们切换到宽版

 找回密码
 立即注册
金黑网络»首页 › 源码编程区 › 前端教程 › html5教程 › css3 定位
返回列表 发新帖

css3 定位

[复制链接]
admin 发表于 2025-5-20 15:26:01 | 显示全部楼层 |阅读模式

1.jpg

2.jpg

1.jpg

  1. <title>相对定位</title>
  2.   <style>
  3.     * {
  4.       margin: 0;
  5.       padding: 0;
  6.     }

  8.     /*
  9.       1. 改变位置的参照物是 自己原来的位置
  10.       2. 不脱标，占位
  11.       3. 标签显示模式特点 不变
  12.     */

  14.   div {
  15.     position: relative;
  16.     top: 100px;
  17.     left: 200px;
  18.   }   
  19.   </style>
复制代码
1.jpg
  1. <title>绝对定位</title>
  2.   <style>
  3.     * {
  4.       margin: 0;
  5.       padding: 0;
  6.     }

  8.     img {
  9.       width: 400px;
  10.     }

  12.     .news {
  13.       position: relative;
  14.    
  15.       margin: 100px auto;
  16.       width: 400px;
  17.       height: 350px;
  18.       background-color: #f8f8f8;
  19.     }

  21.     /*
  22.       1. 脱标，不占位
  23.       2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置
  24.       3. 显示模式特点改变：宽高生效（具备了行内块的特点）
  25.     */

  27.     .news span {
  28.       position: absolute;
  29.       top: 0;
  30.       right: 0;

  32.       /* display: block; */
  33.       width: 92px;
  34.       height: 32px;
  35.       background-color: rgba(0,0,0,0.6);
  36.       text-align: center;
  37.       line-height: 32px;
  38.       color: #fff;
  39.     }
  40.   </style>
  41. </head>
  42. <body>
  43.   <div class="news">
  44.     <img src="./images/news.jpg" alt="">
  45.     <span>展会活动</span>
  46.     <h4>2222世界移动大会</h4>
  47.   </div>
  48. </body>
复制代码
1.jpg

  1. <title>绝对定位-居中</title>
  2.   <style>
  3.     img {
  4.       position: absolute;
  5.       left: 50%;
  6.       top: 50%;

  8.       /* margin-left: -265px;
  9.       margin-top: -127px; */

  11.       /* 方便： 50% 就是自己宽高的一半 */
  12.       transform: translate(-50%, -50%);
  13.     }
  14.   </style>
  15. </head>
  16. <body>
  17.   <img src="./images/login.webp" alt="">
  18. </body>
复制代码
2.jpg
3.jpg

1.jpg

  1. <title>固定定位</title>
  2.   <style>
  3.     * {
  4.       margin: 0;
  5.       padding: 0;
  6.     }

  8.     /*
  9.       1. 脱标，不占位
  10.       2. 参照物：浏览器窗口
  11.       3. 显示模式特点 具备行内块特点
  12.     */

  14.     div {
  15.       position: fixed;
  16.       top: 0;
  17.       right: 0;

  19.       width: 500px;
  20.     }
  21.   </style>
复制代码


回复

举报

返回列表 发新帖

QQ|网站地图|Archiver|手机版|金黑网络 ( 粤ICP备2021124338号 )

网站建设，微信公众号小程序制作，商城系统开发，高端系统定制，app软件开发，智能物联网开发，直播带货系统等

Powered by Www.Jinhei.Cn

Copyright © 2013-2024 深圳市金黑网络技术有限公司 版权所有

快速回复 返回顶部 返回列表