CSS定位与显示属性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/cout__waht/article/details/81670542

本文深入探讨CSS中的display属性及position属性的应用，包括如何利用display属性改变元素的框类型，以及通过position属性实现四种不同的定位方式：static、relative、absolute和fixed。此外，还介绍了与定位相关的CSS属性如top、left等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一切皆为框

display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

CSS position 属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。(没有position 属性时,根据元素在html文档中的位置,块和行默认的位置安排)
#bt1{
    position: static;
  }bt1 是button 1; 整个图片是一个div 红圈外的白圈是div 的margin,红圈是div边框 
    bt1的父节点是div 所以绝对定位就是相对父的块级框进行定位
relative(相对定位)

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。(元素框依旧在文档流中,所以其他元素位置不动,但是该元素可以根据之前的位置进行定位)
  #bt1{
    position: relative;
    top: 20px;
    left: 20px;
  }
absolute(绝对定位)

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。(!!元素在文档中的位置被删除,其他元素占用其位置进行从新排序,之后根据父框的左上角起始位置进行定位)!!!!父框不是边框,是块框或行框.
  #bt1{
    position: absolute;
    top: 0px;
    left: 0px;
  }
fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。(!!会删除元素的框,但是定位不是根据父框,而是根据真个可视文档框)
  #bt1{
    position: fixed;
    top: 0px;
    right: 0px;
  }
  
</style>
</head>
<body>
  <p>这是标签p 和div同级</p>
<div>
    <button id="bt1">1</button>
    <button id="bt2">2</button>
    <button id="bt3">3</button>
</div>

CSS 定位属性

CSS 定位属性允许你对元素进行定位。

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

overflow

<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一
种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。

</div>

属性值为scroll默认 visible隐藏hidden

z-index

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>