栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

前端面试题:几种不同的定位分别有什么特点?详细阐述

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

前端面试题:几种不同的定位分别有什么特点?详细阐述

  • 定位的含义是将元素放在指定的位置上,在css中特指position属性,他一共有5种属性值。
  • 分别是
    • static静态定位,是元素自带的默认的定位方式。
    • relative是相对定位,他是基于元素本身的位置进行定位的,不会脱离文档流。
    • fixed是固定定位是基于浏览器窗口进行定位的,会脱离文档流。
    • absolute是绝对定位,是基于最近的被设置了非静态定位的上级元素进行定位的,他会脱离文档流,常用的场景是子绝父相。
    • sticky是粘性定位,是css新增的属性值;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上,简单说在滑动过程中,某个元素距离其父元素的距离达到 sticky 粘性定位 要求时;position:sticky 这时的效果就相对于 fixed 定位,固定到适当的位置。
  • 使用定位的时候如果需要元素进行位置的调整需要配合偏移属性进行实现对应的效果。偏移属性有四个:top;right;bottom;left;定位的属性决定了定位的偏移参照物
  • 参照物问题
    • 静态定位不会发生位置的调整所以不存在参照物的问题
    • 相对定位添加偏移属性后,相对于自己原来的位置进行位置调整
    • 绝对定位:如果父元素及外侧没有任何已经定位的元素,则参照浏览器屏幕左上角(body左上角)进行位置的调整;如果父元素或者是就近的父级元素有定位则相对于就进行元素的左上角进行位置的调整;绝对定位的参照物就是所谓的包含块的意思
    • 固定定位:参照物是浏览器可视窗口位置的左上角进行位置调整,不会受到滚动条的滚动而影响
    • 粘性定位:粘性定位参照物在实现固定吸顶效果的时候参照物与固定定位一样

*陆荣涛前端学习交流Q群858752519
加群备注:CSDN推荐

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1024573.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号