A-A+

什么是绝对定位、相对定位和固定定位?它们有什么区别?

2018年09月22日 css, 前端基础 暂无评论

首先要理解的一个重要概念是网页上的每个元素都是一个块。字面上是一个像素矩形。将元素设置为display: block;或者默认情况下该元素是显示时,这很容易理解:block; 这意味着您可以设置宽度和高度,该元素将遵循该宽度和高度。但是display: inline;默认情况下,元素也是矩形,它们只是流向不同的页面,尽可能水平排列。
现在您将每个页面元素描绘成一个像素块,我们可以讨论如何使用定位来准确地将像素块放到您想要的位置。我们将不再对盒子模型进行任何讨论,但这也会影响到这一点......

  • 静态定位:static。这是每个页面元素的默认值。所有元素的定位默认值,它们都是static。static并不意味着什么; 它只是意味着元素将像往常一样流入页面。你设置元素的唯一原因position: static;是强行删除一些应用于控件之外的元素的定位。这是相当罕见的,因为定位不会级联。
  • relative定位。这种类型的定位可能是最令人困惑和误用的。它的真正含义是“相对于自身”。如果你设置position: relative;如果元素没有其他定位属性(顶部top,左边left,底部bottom或右边right),它根本不会影响它的位置,它将完全像你将它保留为position:static; 但是,如果你确实给它一些其他的定位属性,top: 10px;它会将它的位置从通常的位置向下移 10个像素。我相信你可以想象,基于常规位置移动元素的能力非常有用。我发现自己使用它来多次排列表单元素,这些元素倾向于不想按照我希望的方式排列。设置位置时还会发生另外两件事:相对; 在你应该知道的元素上。一个是它引入了在该元素上使用z-index的能力,这对于静态定位的元素并不真正起作用。即使您没有设置z-index值,此元素现在也会显示任何其他静态定位元素的顶部。你不能通过在静态定位的元素上设置更高的z-index值来对抗它。另一件事是它限制了绝对定位的子元素的范围。作为相对定位元素的子元素的任何元素都可以绝对定位在该块中。
  • 绝对定位:absolute。这是一种非常强大的定位类型,允许您将任何页面元素准确地放置在您想要的位置。您可以使用顶部top,左侧left,底部bottom及右边right的定位属性。请记住,这些值将相对于具有相对(或绝对)定位的第一个父元素。如果没有这样的父级,它将默认一直返回到<html>元素本身,这意味着它将相对于页面本身放置。关于绝对定位的权衡(以及最重要的事情要记住)是这些元素从页面上的元素流中移除。具有此类定位的元素不受其他元素的影响,并且不会影响其他元素。每次使用绝对定位时都要考虑这个问题。过度使用或不当使用会限制您网站的灵活性。
  • 固定定位fixed。这种类型的定位较少用,但肯定有其用途。固定位置元素相对于浏览器窗口本身定位。滚动窗口时视口不会改变,因此固定的定位元素将保持在滚动页面时的位置,比如滚动时,顶部固定不动。好处是它始终在页面上保持导航,并在页面上创建有趣的效果。不好的是,存在一些可用性问题。在我的笔记本电脑上,内容有可能被切断。这是一个很酷的效果,可能很有用,但需要进行彻底的测试。

给我留言

Copyright © 前端面试题 保留所有权利.   Theme  Ality 桂ICP备17012235号-1

用户登录