HTML及CSS学习笔记 09 - 定位

最新推荐文章于 2024-01-23 13:59:14 发布

chodenke

最新推荐文章于 2024-01-23 13:59:14 发布

阅读量411

点赞数

分类专栏： HTML及CSS学习笔记文章标签： HTML CSS position absolute relative

本文链接：https://blog.csdn.net/cgl125167016/article/details/90053909

版权

HTML及CSS学习笔记专栏收录该内容

16 篇文章 5 订阅

订阅专栏

本文是HTML及CSS课程的第九课。定位，既是将元素放置于界面的什么位置。本文主要介绍使用position定位属性给元素设置定位的几种方式，及关于定位的其他几点问题

一、定位的概念

1、定位是什么

定位，既是将元素放置于界面的什么位置。定位的基本思想很简单，它允许我们定义元素相对于其正常位置，或者相对于最近的已定位父元素，甚至浏览器窗口的位置。

2、定位怎么实现

在CSS中，我们通过position属性实现元素的定位。position属性及值的说明如下：

属性及值	说明
`position: relative;`	元素相对于其正常位置进行定位
`position: absolute;`	元素相对于最近的已定位父元素进行定位
`position: fixed;`	元素相对于浏览器窗口定位
`position: sticky;`	默认值。元素不浮动，按正常文档流显示
`position: static;`	默认值，即没有定位，元素遵循正常的文档流

说明：

static为position属性的默认值，元素会遵循正常的文档流。当某个元素设置了样式属性position并且属性值不为static时，我们称该元素为一个定位元素。

二、常见定位方式

1、相对定位

当元素的样式属性position值为relative时，表明该元素会进行相对定位。元素会相对于文档流中的原来位置进行偏移。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 相对定位 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
      .d-relative {height: 50px; width: 200px; border: 10px solid lightgreen; position: relative; top: 5px; left: 20px;}
    </style>
  </head>
  <body>
    <div class="d-normal">正常的div</div>
    <div class="d-relative">相对定位的div</div>
    <div class="d-normal">正常的div</div>
  </body>
</html>

页面浏览效果：
相对定位
说明：

相对定位的元素仍然会占据自己在正常的文档流中的位置。周围其他元素位置并不受影响。
相对定位的元素，偏移量由top、left、bottom、right四个属性的值决定。top: 5px;使元素相对于原来的位置上方空出5像素，left: 20px;使元素相对于原来的位置左方空出20像素。
top和bottom属性同时设置时，bottom属性并不起作用；left和right属性同时设置时，right属性并不起作用。
如果你想让一个元素变成定位元素，并且不改变它在文档流中的位置，那么，设置它的position样式属性为relative。

2、绝对定位

当元素的样式属性position值为absolute时，表明该元素会进行绝对定位。元素会脱离原来的文档流，相对于最近的已定位父元素进行偏移。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 绝对定位 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {height: 250px; width: 250px; border: 10px solid lightgreen; position: relative;}
      .d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
      .d-absolute {height: 50px; width: 200px; border: 10px solid lightgreen; position: absolute; bottom: 5px; right: 5px;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <div class="d-normal">正常的div</div>
      <div class="d-absolute">绝对定位的div</div>
      <div class="d-normal">正常的div</div>
    </div>
  </body>
</html>

页面浏览效果：
绝对定位
说明：

绝对定位的元素将脱离原来的文档流。周围其他元素会忽略绝对定位元素。
绝对定位的元素，偏移量仍然由top、left、bottom、right四个属性的值决定。bottom: 5px;使元素相对于最近的已定位父元素下方空出5像素，right: 5px;使元素相对于最近的已定位父元素右方空出5像素。
绝对定位元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于最初的包含块（可能是画布或<html>标签）。

3、固定定位

当元素的样式属性position值为fixed时，表明该元素会进行固定定位。元素也会脱离原来的文档流，相对于浏览器窗口定位，看起来就像元素固定在浏览器的窗口上，不论如何滚动页面，它都不会移动。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 固定定位 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      body {height: 1000px;}
      .d-normal {height: 100px; width: 100px; border: 10px dotted lightsalmon;}
      .d-fixed {height: 120px; width: 120px; border: 10px solid lightgreen; position: fixed; top: 50px; left: 50px;}
    </style>
  </head>
  <body>
    <div class="d-normal">正常的div</div>
    <div class="d-fixed">固定定位的div</div>
  </body>
</html>

页面浏览效果：
固定定位
说明：

固定定位的元素也会脱离原来的文档流。周围其他元素会忽略固定定位元素。
固定定位的元素，偏移量仍然由top、left、bottom、right四个属性的值决定。top: 50px;使元素相对于浏览器窗口上方空出50像素，left: 50px;使元素相对于浏览器窗口左方空出50像素。
无论用户如何拖曳浏览器上的滚动条，固定定位的元素都不会跟着移动。

4、粘性定位

当元素的样式属性position值为sticky时，表明该元素会进行粘性定位。粘性定位的元素是依赖于用户的滚动，在 position:relative与position:fixed定位之间切换。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 粘性定位 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      body {height: 1000px;}
      .d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
      .d-sticky {height: 50px; width: 200px; border: 10px solid lightgreen; position: sticky; top: 5px; left: 20px;}
    </style>
  </head>
  <body>
    <div class="d-normal">正常的div</div>
    <div class="d-sticky">粘性定位的div</div>
    <div class="d-normal">正常的div</div>
  </body>
</html>

页面浏览效果：
粘性定位
说明：

当浏览器窗口中包含目标区域时，粘性定位元素的行为和相对定位position:relative一样; 而当页面滚动超出目标区域时，它的表现就像固定定位position:fixed，固定在浏览器窗口的目标位置。
粘性定位的元素，偏移量仍然由top、left、bottom、right四个属性的值决定。top: 5px;使元素相对于原来的位置（或浏览器窗口）上方空出5像素，left: 20px;使元素相对于原来的位置（或浏览器窗口）左方空出20像素。

三、关于定位的其他几点问题

1、浮动元素定位

这里演示当一个元素已经设置浮动后，再设置定位属性会有什么效果。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 给浮动元素设置定位 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1, .d2, .d3 {height: 120px; width: 120px; border: 10px dotted lightsalmon; float: left;}
      .d-position {position: relative; top: 20px; left: 20px;}
    </style>
  </head>
  <body>
    <div class="d1">向左浮动</div>
    <div class="d2 d-position">向左浮动，同时定位</div>
    <div class="d3">向左浮动</div>
  </body>
</html>

页面浏览效果：
浮动元素定位
说明：

当一个元素为浮动元素，同时设置定位属性时，元素仍然遵守相应的定位规则，相对于其浮动位置，或者最近的已定位父元素，或者浏览器窗口的位置进行定位。

2、行级元素定位

这里演示给行标签设置定位属性的效果。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 行级元素定位 </title>
    <style>
      body {height: 1000px;}
      * {margin: 0; border: 0; padding: 0;}
      .d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
      .span-relative {border: 10px solid lightgreen; position: relative; top: 5px; left: 20px;}
    </style>
  </head>
  <body>
    <div class="d-normal">正常的div</div>
    <span class="span-relative">相对定位的span</span>
    <div class="d-normal">正常的div</div>
  </body>
</html>

页面浏览效果：
行级元素定位
说明：

给行级标签设置定位属性，元素仍然遵守相应的定位规则。行级元素定位后并不会变成块级元素。

3、设置元素的堆叠顺序

元素经过定位后，有可能显示在浏览器窗口中时出现位置重叠的现象，默认情况下，在HTML文件中后出现的元素将会覆盖前面的元素。我们可以通过CSS中的z-index属性调整元素的堆叠顺序。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 调整元素的堆叠顺序 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1, .d2 {width: 100px; height: 100px; position: relative;}
      .d1 {background-color: lightgreen; z-index: 1;}
      .d2 {background-color: lightsalmon; top: -50px; left: 50px;}
    </style>
  </head>
  <body>
    <div class="d1"></div>
    <div class="d2"></div>
  </body>
</html>