css position属性与js滚动

这篇具有很好参考价值的文章主要介绍了css position属性与js滚动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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>

css position属性与js滚动,# JavaScript权威指南,css,css3,前端

图 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>

css position属性与js滚动,# JavaScript权威指南,css,css3,前端

图 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>

 css position属性与js滚动,# JavaScript权威指南,css,css3,前端

图 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>

css position属性与js滚动,# JavaScript权威指南,css,css3,前端

图 position=sticky 示意图

当top、right、bottom、left四个属性中至少设置一个具体值时,元素具备两种状态静态定位状态及固定定位(fixed)状态。例如,当top=30px时,元素离窗口距离大等于30px时,元素为静态定位状态,否则为固定定位状态。

css position属性与js滚动,# JavaScript权威指南,css,css3,前端

图 position=sticky 元素处理固定状态示意图

注意:当元素处于固定状态时,其在文档流中的位置会被保留。

2 滚动

1)Window对象的scrollTo方法,接收一个点的x和y坐标,这个方法会滚动窗口,从而让这个点位于视口点左上角。如果这个点太接近文档顶部或右边,浏览器会尽可能让视口左上角接近这个点,但不可能真的移动到该点。

2)Window对象的scrollBy方法,参数数个相对值,会加在当前滚动位置之上。

scrollBy(0,50); // 向下滚动50像素。

3)HTML元素上的scrollIntoView方法,保证调用它的那个元素在视口中可见。默认情况下,滚动后的结果会尽量让元素的上边对齐或接近视口上沿。如果给这个方法传人唯一参数false,则滚动结果会尽量让元素的底边对齐视口下沿。

2.1 平衡滚动

如果想让上述滚动方法平滑移动,则需传人一个对象,而不是两个数值。这个对象的behavior属性有两个属性值:auto(instant),默认值,立即滚动到指定位置;smooth,滚动时平滑过渡。

css position属性与js滚动,# JavaScript权威指南,css,css3,前端

图 平滑滚动示意图文章来源地址https://www.toymoban.com/news/detail-715508.html

到了这里,关于css position属性与js滚动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 13 CSS 的position属性

    13 CSS 的position属性 就像photoshop中的图层功能会把一整张图片分层一个个图层一样,网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的,然后通过定位属性position对元素进行定位摆放,最终实现网页的布局

    2024年02月11日
    浏览(31)
  • CSS position属性sticky

    在开发时,经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候,让一部分内容作为navbar,也就是置顶显示,我们一般会使用js监听scroll事件来实现,但是新增的css3属性position:sticky可以简单实现,省去了繁琐的计算 position的含义是指定位类型,取值类型可以有:s

    2024年02月21日
    浏览(31)
  • CSS中position: fixed定位后div中内容不能滚动

    问题描述 div 设置定位后,内容不能滚动。 解决方案

    2024年02月06日
    浏览(33)
  • JavaScript 权威指南第七版(GPT 重译)(二)

    本章记录了 JavaScript 表达式以及构建许多这些表达式的运算符。 表达式 是 JavaScript 的短语,可以 评估 以产生一个值。在程序中直接嵌入的常量是一种非常简单的表达式。变量名也是一个简单表达式,它评估为分配给该变量的任何值。复杂表达式是由简单表达式构建的。例如

    2024年03月25日
    浏览(52)
  • css3 实现文字横幅无缝滚动

    使用 css3 关键帧 @keyframes 和 animation 属性实现文字横幅无缝滚动。

    2024年02月13日
    浏览(44)
  • CSS3实现文字循环滚动播放

    效果图: 代码: CSS3 动画 CSS3 动画文档看这里

    2024年02月02日
    浏览(76)
  • 大前端04-固定组件在屏幕位置,随着滑轮滚动——使用css样式:position

    在遇到一些很长,很长的页面时候我们希望组件能够跟随用户操作,悬浮在固定位置,因此我们可以使用postition组件 CSS 的 position 属性用于设置元素在页面上的定位方式。它有 5 个可能的值: static 、 relative 、 absolute 、 fixed 和 sticky 。下面分别对这些值进行介绍,并给出一些

    2023年04月12日
    浏览(52)
  • css3实现无缝滚动,鼠标经过暂停

    js也可以实现,但css3更加的平滑和资源占用更少。下面是具体代码,动画要单独用一个类名,否则暂停估计不会生效: 原理:动画向上移动,目标完全消失后,从头开始,注意 动画移动高度是文本高度,这个不好控制要微调,如果文本是动态的则要把动画通过js生成动态设置

    2024年02月22日
    浏览(57)
  • CSS选择器-CSS3属性

    持续更新… 1、CSS3的概念和优势 CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式、语言模块、

    2024年02月11日
    浏览(44)
  • css3新增属性

    box-shadow: 10px 10px 10px rgba(54,54,54,0.36); 元素阴影,这个不会影响页面布局;分别指定如下参数: 水平偏移量,正数向右,负数向左 垂直偏移量,正数向下,负数向上 阴影模糊效果,数值越大越模糊 颜色 border-radius: 2px; 边框圆角半径,会影响box-shadow显示 border-top-left-radius bord

    2024年02月12日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包