[css] 说说你对相对定位、绝对定位、固定定位的理解

[css] 说说你对相对定位、绝对定位、固定定位的理解

position 属性指定了元素的定位类型。position 属性的五个值:static(默认值)
relative(相对定位)
fixed(固定定位)
absolute(绝对定位)
sticky(粘性定位)
relative 相对定位:相对自身元素的原来进行定位。移动相对定位元素,但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
用途:
第一个,为微调元素的位置
第二个,做绝对定位的参考(父相子绝)
absolute 绝对定位:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>(初始包含块)absolute 定位使元素的位置与文档流无关,因此不占据空间。
absolute 定位的元素和其他元素重叠。
fixed 固定定位:元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关,因此不占据空间
Fixed定位的元素和其他元素重叠
用途:
固定到浏览器窗口固定位置的元素
跟随导航
回到顶部
sticky 粘性定位:粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
用途:页面吸顶效果

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413320.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

宝塔nginx运行vue项目刷新404问题解决

我的项目是webpack构建的&#xff0c;因为我做一切开发都想要希望要从一个标准的构建去编码 所以&#xff0c;我的项目在node下运行&#xff0c;开发&#xff0c;调试是没有一点问题的&#xff0c;npm run build也是完全OK的&#xff0c;vue路由是history模式 把build出来的d…

[css] css中的选择器、属性、属性值区分大小写吗?

[css] css中的选择器、属性、属性值区分大小写吗&#xff1f; 选择器和属性区分大小写&#xff0c;属性值如果是颜色可以不区分大小写吧个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌…

vscode设置中文,设置中文不成功问题

刚安装好的vscode界面显示英文&#xff0c;如何设置中文呢&#xff1f; 在locale.json界面设置”locale":"zh-cn"也未能实现界面为中文&#xff0c;在网上找了参考了&#xff0c;以下教程真实测试有效&#xff01; 首先&#xff1a; 下载插件&#xff1a;Chines…

移动端阻止body左右偏移

如果一直找不到你的CSS问题&#xff0c;就用下面的CSS解决吧 html,body{overflow-x: hidden;} 原生JS function bodyScroll(){e.preventDefault(); } document.addEventListener(touchmove, bodyScroll, false); //阻止 document.removeEventListener(touchmove, bodyScroll,…

[css] img标签是行内元素,为什么却能设置宽高

[css] img标签是行内元素&#xff0c;为什么却能设置宽高 原来CSS中还有一个概念&#xff1a;可替换元素MDN上是这么解释的&#xff1a;在 CSS 中&#xff0c;可替换元素&#xff08;replaced element&#xff09;的展现效果不是由 CSS 来控制的。这些元素是一种外部对象&…

网页Request Headers请求头和Response Headers响应头

Request Headers Accept:告诉服务器&#xff0c;客户机支持的数据类型 Accept-Encoding:告诉服务器&#xff0c;客户机支持的数据压缩格式 Cache-Control&#xff1a;缓存控制&#xff0c;服务器通过控制浏览器要不要缓存数据 Connection:处理完这次请求&#xff0c;是断开…

springboot+jpa+mysql+redis+swagger整合步骤

springbootjpaMySQLswagger框架搭建好之上再整合redis&#xff1a; 在电脑上先安装redis&#xff1a; 一、在pom.xml中引入redis 二、在application.yml里配置redis&#xff0c;单独说明&#xff1a;redis刚一开始安装好是没有设置密码的。否则&#xff0c;会报connection错误。…

[css] 如何禁止长按保存或复制图像?

[css] 如何禁止长按保存或复制图像&#xff1f; img {pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目…

python3下使用requests实现模拟用户登录 —— 基础篇(马蜂窝)

我是从这篇博客中&#xff08;https://blog.csdn.net/zwq912318834/article/details/79571110&#xff09;了解的一点基础东西&#xff0c;代码都是从这篇博客里面的源代码直接复制过去测试和学习的。 遇到的问题&#xff1a; 1、返回状态码&#xff1a;502——百度得知这是一…

ACM-ICPC 2018 焦作赛区网络预赛 H题 String and Times(SAM)

Now you have a string consists of uppercase letters, two integers AA and BB. We call a substring wonderful substring when the times it appears in that string is between AA and BB (A \le times \le BA≤times≤B). Can you calculate the number of wonderful sub…

[css] css的height:100%和height:inherit之间有什么区别呢?

[css] css的height:100%和height:inherit之间有什么区别呢&#xff1f; 上周在微博上无节操吐槽了下inherit的段子&#xff0c;没想到回声还不少&#xff1a; 微博inherit无节操段子 不过inherit确实是个好东西&#xff0c;不仅节约代码&#xff0c;尤其与background之流打交…

http详解 请求报文格式和响应报文格式

题外话&#xff1a; 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人&#xff0c;信不信未来的PI&#xff0c;了解一下&#xff0c;唯一一个高度与之持平的项目 HTTP 工作原理 超文本传输协议(Hypertext Transfer Protocol&#xff0c;简称HTT…

【LeetCode】拓扑排序

【207】 Course Schedule 排课问题&#xff0c;n门课排课&#xff0c;有的课程必须在另外一些课程之前上&#xff0c;问能不能排出来顺序。 题解&#xff1a;裸的拓扑排序。参考代码见算法竞赛入门指南这本书。 1 class Solution {2 public:3 bool dfs(const vector<vec…

Python2和Python3的兼容性写法

# python2 和 python3的兼容代码 try:# python2 中import cookielibprint(f"user cookielib in python2.") except:# python3 中import http.cookiejar as cookielibprint(f"user cookielib in python3.")

[css] 说说你对sass的嵌套规则的理解?

[css] 说说你对sass的嵌套规则的理解&#xff1f; 嵌套类型有&#xff1a;选择器嵌套、属性嵌套、伪类嵌套、群组选择器嵌套 。 .tenant-detail { background: transparent!important; .tenant-container { //1.选择器嵌套 width: 100%; > div { margin: 0{ //2.属性嵌套 相…

AGC027B Garbage Collector

一道很好的构造题原题链接 很快就能想到&#xff0c;捡每个垃圾的能量可以最后再算。然后&#xff0c;对于每个垃圾&#xff0c;在路上耗费的能量仅与它是第几个被捡的有关&#xff0c;于是我们考虑将垃圾分组。 首先&#xff0c;我们定义\(F(x,i)\)为某次从\(0\)出发&#xff…

[css] 你认为sass和less的最大区别是什么呢?你喜欢哪个?为什么?

[css] 你认为sass和less的最大区别是什么呢&#xff1f;你喜欢哪个&#xff1f;为什么&#xff1f; less 没有循环只有递归&#xff1b; less 没有 if 只有 when&#xff1b; sass 多个 function 很棒&#xff0c;否则只能堆变量了&#xff1b; less 拼接类名的字符串需加上 ~…

Python爬虫自学之第(零)篇——爬虫思路和request模块使用

题外话&#xff1a; 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人&#xff0c;信不信未来的PI&#xff0c;了解一下&#xff0c;唯一一个高度与之持平的项目 爬虫思路 无思路不成器&#xff0c;如果你怎么想都想不出爬虫的原理&#xff0c;…

[css] css的哪个属性可以把所有元素或其父元素的属性重置呢?

[css] css的哪个属性可以把所有元素或其父元素的属性重置呢&#xff1f; all:unset个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

pycharm中更新pip版本的问题

经常使用Python的都知道pip&#xff0c;但有时候&#xff0c;下载某个模块不成功&#xff0c;提示信息如下 pytharm查看自带的pip版本 解决方式一&#xff1a; pytharm的terminal里卸载pip再安装pip 如果还不行&#xff0c;解决方式二 去你当前的项目路径下找到lib文件夹下的…