谈一谈当初面试时的一些问题-Position定位

最新推荐文章于 2024-10-31 15:02:05 发布

灬梦不觉

最新推荐文章于 2024-10-31 15:02:05 发布

阅读量190

点赞数 1

分类专栏：谈一谈当初面试时的一些问题文章标签： css

本文链接：https://blog.csdn.net/wstsfbj/article/details/124420744

版权

谈一谈当初面试时的一些问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了如何使用CSS的position属性来实现页面组件的拖动效果。通过设置外层元素为relative，内层元素为absolute，可以实现外层拖动时内层元素跟随的效果。同时回顾了position的各个值，如static、relative、absolute、fixed和sticky的用法和应用场景。这是一个关于前端开发中CSS布局和交互设计的问题。

摘要由CSDN通过智能技术生成

为什么写这篇文章？

最近遇到一个需求，在页面中定义一个组件，组件可以自由拖动，但在组件内还有一些其它组件，如何在拖动外层组件的同时，让内层组件和外层组件一起被拖动？

实现这个需求有很多方案，最简单的当然是使用很多大神们写好的组件了φ(>ω<*) ，但这个需求让我想起了曾经一次面试，总有一些问题，是我们学习过程中忘记和忽略的，当时也是这么一个问题，和这个大体类似，这家公司貌似是做可视化的，具体的不是很清楚，因为面试失败了嘛o(╥﹏╥)o，当时面试官和我解析了一下这个问题，其实解决问题的思路大概就是关于CSS的使用，当时学习CSS的时候可能仅只是记住了一部分表层，也坑能当时记住了，后来随着长时间用不到，就忘了￣▽￣；

关于Position属性的使用

position属性指定了元素的定位类型。

static:没有定位，遵循正常的文档流对象，也许你感觉没啥用，貌似确实没啥用，写了这么多年代码，就没用过！！但我查了一下，还真有用，在全部元素都被定位了的情况下，有一些元素不需要被定位，就可以使用这个属性。

relative:相对定位，相对于其正常位置进行定位，我当初有一个项目是做Weex开发，竟然没有背景图片属性！想用背景图只能用图片定位定上去，哎，也不知道现在修复了没有。

absolute:绝对定位，划重点，当初就是栽在这个上面的，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>，这个定位结合relative就可以解决刚才那个需求，外层relative，内层absolute。

fixed:绝对定位，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。这个用的也挺多，这个没什么坑，就不多说了。

sticky:粘性定位，relative和fixed的结合:当元素在屏幕内，表现为relative，滚出显示器屏幕的时候，表现为fixed,兼容性感觉不是很好，用得不多。

<div class="pos-out">
  <div class="pos-in"></div>
</div>

.pos-out {
  position: relative;
  top: 50px;
  width: 500px;
  height: 500px;
  background-color: aqua;
  .pos-in {
    position: absolute;
    top: 0px;
    width: 100px;
    height: 100px;
    background-color: darkblue;
  }
}