css 子元素相对父元素固定定位

最新推荐文章于 2024-07-04 15:38:12 发布

紫泪轻扬

最新推荐文章于 2024-07-04 15:38:12 发布

阅读量1.4k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/CiCi2012_3_6/article/details/116206721

版权

position:fixed 默认是相对浏览器窗口定位的

实现相对父级元素定位如下:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>子元素相对父元素固定定位</title>
  <style>
    .grand {
      position: relative;
    }

    .box {
      height: 100px;
      width: 300px;
      overflow: auto;
      background: green;
      margin-top: 200px;
    }

    .long {
      height: 900%;
      width: 1600px;
      background: blue;
    }

    .fix {
      height: 20px;
      width: 30px;
      background: red;
      position: absolute;
      left: 200px;
      top: 10px;
      z-index: 1;
    }
  </style>
</head>

<body>
  <div class="grand">
    <div class='box'>
      <div class='long'></div>
      <div class='fix'></div>
    </div>
  </div>
</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

紫泪轻扬

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 子元素相对父元素固定定位

position:fixed 默认是相对浏览器窗口定位的实现相对父级元素定位如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>子元素相对父元素固定定位</title> <style> .grand {
复制链接

扫一扫