#yyds干货盘点# 前端歌谣的刷题之路-第一百三十四题-定位-fixed

简介: #yyds干货盘点# 前端歌谣的刷题之路-第一百三十四题-定位-fixed

题目

 固定定位是由绝对定位衍生出来的,不同之处在于,固定定位元素的父级始终是视口。因此固定定位可以用来创建始终停留在窗口相同位置的元素。比如:固定侧栏、固定顶栏等。这样方便用户,不必再费事寻找栏目。

 现在给"nav"盒子设置固定定位属性"position: fixed"、设置"top: 0"、设置自定义宽度、背景颜色。此时滑动滚轮,可以发现"nav"盒子始终固定在页面的最上方。但是,数字1却被覆盖了。由于固定定位的盒子不在流中,所以遮盖住了下方的元素。此时再给"section"盒子设置上外边距为1rem,此时1数字正常出现了。固定定位需要注意下方是否有元素被遮挡。

 完成以上所讲的步骤即可通过测试,进入下一节的学习吧。

image.png

编辑

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fixed</title>
</head>
<style type="text/css">margin: 0;
    padding: 0;
  }
  nav {
    position: fixed;
    top: 0;
    width: 1000px;
    background-color: green;
  }
  section {
    margin-top: 1rem;
  }
</style>
<body>
  <nav><br</nav>
  <section>
    1<br2<br
    <br
    <br
    <br<br
    <br<br<br
    <br<br<br<br
    <br<br<br<br
  </section>
</body>
</html>
相关文章
|
6月前
|
前端开发
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
103 1
|
前端开发 测试技术
你发现一个bug,如何定位这个是前端还是后端缺陷?建议收藏
你发现一个bug,如何定位这个是前端还是后端缺陷?建议收藏
482 0
|
2月前
|
前端开发
前端基础(十三)_定位position、定位层级z-index
本文讲解了CSS中的定位机制,包括静态定位、相对定位、绝对定位和固定定位,并通过实例展示了如何使用这些定位方法调整元素位置。同时,还介绍了z-index属性的使用,解释了如何通过调整z-index值来改变定位元素的层叠顺序。
28 6
前端基础(十三)_定位position、定位层级z-index
|
2月前
|
前端开发
|
3月前
|
前端开发 容器
解锁CSS定位奥秘,从迷茫到精通,让你的网页布局“稳如老狗”,引领前端新潮流!
【8月更文挑战第23天】本文深入探讨了Web前端开发中CSS定位的三大基石:相对定位、绝对定位与固定定位。通过具体示例,展示了各种定位方式的特点及应用场景。相对定位可在不影响布局的情况下微调元素位置;绝对定位使元素完全脱离文档流,适用于精确控制位置的需求;固定定位则确保元素始终固定于浏览器窗口特定位置,不受页面滚动影响。这些技巧对于实现复杂网页布局至关重要。
52 0
|
6月前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
53 1
|
6月前
|
前端开发 开发者 容器
【Web 前端】相对定位,绝对定位,固定定位的区别?
【4月更文挑战第22天】【Web 前端】相对定位,绝对定位,固定定位的区别?
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
264 0
|
前端开发 JavaScript 算法
前端(七)——React框架的定位与应用场景解析
前端(七)——React框架的定位与应用场景解析
482 0
|
6月前
|
前端开发
【零基础入门前端系列】—属性选择器和定位(二十)
【零基础入门前端系列】—属性选择器和定位(二十)