项目三任务四 制作首页

网上书店制作首页CONTENTS目录元素的定位第一部分定位属性的特点第二部分元素的定位第一部分元素的定位在网页设计中，定位属性是CSS中一个非常强大的工具，它允许开发者将元素放置在页面上的特定位置。元素的定位1.定位模式CSS中的position属性的语法格式非常简单。它是一个单独的属性，后面跟着一个值，这个值决定了元素的定位方式。以下是position属性的基本语法格式：selector{position:value;}其中selector是你要选择的CSS选择器，value是position属性的一个有效值。元素的定位1.定位模式常用的position属性有5个值，代表了不同的定位模式：定位值描述static静态定位（默认定位方式）relative相对定位，相对自身位置定位，不会脱离文档流。absolute绝对定位，脱离文档流的布局，后面的元素会填补它空下来的位置。fixed固定定位，脱离文档流，相对于窗口位置固定。sticky粘性定位，脱离文档流，结合了相对定位和固定定位的特点。表3-4-1position常用的属性值元素的定位2.边偏移一旦元素的position属性被设置为非静态值（即relative、absolute、fixed或sticky），就可以使用以下属性来控制元素的位置：边偏移属性描述top定义元素的上边缘与基准（取决于定位模式）之间的距离。bottom定义元素的下边缘与基准之间的距离。left定义元素的左边缘与基准之间的距离。right定义元素的右边缘与基准之间的距离。表3-4-2边偏移属性及其常用的属性值元素的定位2.边偏移正数元素向指定方向移动元素向相反方向移动负数边偏移属性可以是数值或百分比元素的定位3.静态定位CSS中元素的默认定位方式position属性被设置为static特点正常流布局不受偏移影响不脱离文档流没有层叠上下文元素的定位4.相对定位相对定位（relative）允许我们将元素相对于其在正常文档流中的原始位置进行偏移。使用相对定位的元素仍保留其在文档流中的位置，这意味着它原本占据的空间不会被其他元素占据。position属性被设置为relative元素的定位4.相对定位相对标准流位置发生了偏移元素的定位5.绝对定位绝对定位（absolute）允许我们将元素从文档流中完全脱离出来，并相对于其最近的非静态定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块进行定位。position属性被设置为absolute元素的定位5.绝对定位非静态定位的祖先元素绝对定位的盒子元素的定位6.固定定位固定定位（fixed）是CSS中的一种定位方式，它将元素的位置相对于浏览器窗口进行定位。这意味着即使用户滚动页面，固定定位的元素也会保持在视窗中的固定位置。position属性被设置为fixed元素的定位6.固定定位元素的定位7.粘性定位粘性定位（sticky）结合了相对定位和固定定位的特点。元素在页面滚动到某个指定点之前表现得像相对定位，之后则表现得像固定定位。这种定位方式非常适合创建在页面滚动时才固定的元素，例如，一个在页面滚动到一定位置后固定在视口顶部的页面导航栏。position属性被设置为sticky元素的定位7.粘性定位元素的定位7.粘性定位粘性定位是一种新的定位方式，在较老的浏览器中可能不受支持，因此可能需要使用JavaScript作为备选方案来实现类似的效果。定位属性的特点第二部分定位属性的特点1.相对定位保留空间偏移层叠上下文定位属性的特点2.绝对定位脱离文档流相对于非静态定位的祖先元素可以通过偏移属性进行定位创建层叠上下文定位属性的特点3.固定定位相对于视口滚动不受