css position属性与js滚动

news2024/12/22 22:58:40

“视口”就是浏览器窗口中实际显示文档内容的区域，不包含浏览器的“外框”，如菜单、工具条和标签。文档则是指整个网页。

1 css 的position

static	正常定位，是元素position属性的默认值，元素遵循常规流。
relative	相对定位，会相对于自身在常规流中的位置进行定位。其在常规流中的位置会被保留。
absolute	绝对定位，会脱离文档流，相对于离自身最近的祖先（position为relative）进行偏移定位。
fixed	固定定位，会脱离文档流，相对窗口进行偏移定位。
sticky	粘性定位，类似static和fixed的结合。

表 css position属性的5个值

1.1 relative 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="con1">
        <div class="block"></div>
        <div class="block">position:static</div>
        <div class="block"></div>
    </div>
    <div class="isolate"></div>
    <div class="con2">
        <div class="block block1"></div>
        <div class="block block2">position:relative</div>
        <div class="block"></div>
    </div>
</div>
</body>
</html>

<style lang="less">
  .block {
    width: 150px;
    height: 100px;
    background-color: #f3bbbb;
    border: solid 1px blue;
    text-align: center;
    line-height: 100px;
    color: red;
  }
  .container {
      display: flex;
      .isolate{
          width: 30px;
      }
      .con2 {
          .block1 {
              z-index: 99;
          }
          .block2 {
              z-index: 1;
              background-color: blue;
              position: relative;
              top: -100px;
          }
      }
  }
</style>

图 position=relative 示意图

注意，当position为static(常规)时，z-index及left(等位置元素)均为无效。

1.2 absolute 绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="con1">
        <div class="block"></div>
        <div class="block">position:static</div>
        <div class="block"></div>
    </div>
    <div class="isolate"></div>
    <div class="con2">
        <div class="block block1"></div>
        <div class="block block2">
            <div>position:absolute (parent is "body")</div>
        </div>
        <div class="block"></div>
    </div>
    <div class="isolate"></div>
    <div class="con2">
        <div class="block block1"></div>
        <div class="parent">
            <div class="block block2">position:absolute (parent is "div")</div>
        </div>
        <div class="block"></div>
    </div>
</div>
</body>
</html>

<style lang="less">
    .block {
        width: 150px;
        height: 100px;
        background-color: #f3bbbb;
        border: solid 1px blue;
        text-align: center;
        line-height: 100px;
        color: red;
    }
    .container {
        display: flex;
        .isolate{
            width: 30px;
        }
        .con2 {
            .block1 {
                z-index: 99;
            }
            .block2 {
                line-height: 50px;
                z-index: 1;
                background-color: blue;
                position: absolute;
                top: 50px;
            }
            .parent {
                position: relative;
            }
        }
    }
</style>

图 position=absolute 示意图

注意: absolute 是相对于position=relative的最近父元素定位，当没有找到相关父元素时，会相对于<body>标签定位。

1.3 fixed 固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="block">
    <div class="con"></div>
</div>
</body>
</html>

<style>
.block {
   width: 10000px;
   height: 600px;
   background: #f3c4c4;
}
.con {
    width: 100px;
    height: 100px;
    position: fixed;
    background: blue;
    left: 100px;
    top: 100px;
}
</style>

图 position=fixed示意图

注意：fixed 是相对于窗口，会脱离文档流。

1.4 sticky 粘性定位

当position=sticky时，如果top、right、bottom、left四个属性都不设置具体值，sticky不会生效，其表现效果与static一致。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="big-container">
  <div class="container container1">
    <div class="con con1"></div>
    <div class="sep"></div>
    <div class="con con2"></div>
    <div class="sep"></div>
    <div class="con con3"></div>
  </div>
  <div class="container container2">
    <div class="con con1"></div>
    <div class="sep"></div>
    <div class="con con2"></div>
    <div class="sep"></div>
    <div class="con con3"></div>
  </div>
</div>
</body>
</html>

<style>
  .big-container {
    display: flex;
    .container {
      width: 100px;
      height: 250px;
      margin-left: 30px;
      border: solid 1px #8a8a8a;
      overflow: auto;
      .sep {
        width: 100px;
        height: 30px;
        background: grey;
      }
      &.container2 {
        .con2 {
          top: 30px;
          position: sticky;
        }
      }
      .con {
        width: 100px;
        height: 100px;
        background: #f3bbbb;
      }
      .con2 {
        background: green;
      }
    }
  }
</style>