CSS 定位 (Positioning)
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
1 CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
2 CSS 定位属性
CSS 定位属性允许你对元素进行定位。
属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
3 position 属性
值 描述
absolute(绝对定位) 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定 位。元 素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed(固定定位) 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative(相对定位) 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者
4 Z-index
Z-index可被用于将在一个元素放置于另一元素之后。
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1 //-1 在底层 1 或者0(默认) 表示前层
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>
5 overflow 属性()
属性值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden
}
</style>
</head>
<body>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>
4 vertical-align 属性
值 描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
<html>
<head>
<style type="text/css">
img.top {vertical-align:top}
img.bottom {vertical-align:length}
</style>
</head>
<body>
<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
</body>
</html>
分享到：
相关推荐
### CSS定位详解：绝对定位与相对定位 #### 相对定位（Relative Positioning） 相对定位是一种常见的CSS定位方式，它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...
总的来说，HTML+CSS定位是网页设计中的关键技能，熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集，希望你能深入理解定位的概念，提升你的网页设计能力。记得多实践、多尝试，理论与实践相结合才能...
接下来，我们讨论CSS定位机制。定位分为正常流（Normal Flow）、浮动（Float）、绝对定位（Absolute Positioning）和固定定位（Fixed Positioning）。 1. 正常流：这是默认的布局方式，元素按照源代码顺序从左到右...
**二、CSS定位** 定位（Positioning）提供了更精细的控制，使开发者能够精确地指定元素在页面上的位置。定位分为以下几种类型： 1. **静态定位（static）**：这是元素的默认定位方式，遵循正常文档流。 2. **相对...
css定位 为简单起见，使用 react 构建的常见 css 定位方法教程。 此 repo 旨在用作现场演示和概念证明。 npx create-react-app 生成的自述文件： 创建 React 应用程序入门 这个项目是用引导的。 可用脚本 在项目目录...
在CSS布局中，绝对定位（absolute positioning）是一种强大的定位机制，允许元素脱离其正常文档流，并根据相对于其他元素或浏览器窗口进行定位。本篇将深入探讨绝对定位的参考对象、工作原理及其在实际开发中的应用...
在本主题“CSS定位表格”中，我们将深入探讨如何使用CSS来创建和定位不同布局的表格，包括单行一列、两行一列、三行一列以及多列布局。这些布局通常基于浮动（float）和绝对定位（absolute positioning）方法。 1. ...
本教程将深入讲解CSS定位与div布局，这是创建复杂网页结构的关键技能。在第10课中，我们将详细探讨以下知识点： 1. **CSS盒模型**：理解CSS盒模型是掌握布局的基础。每个HTML元素都是一个矩形的盒子，包括内容区域...
CSS 定位 2015 年 CSS 定位技术的高级概述。 最重要的课题。 无处不在：布局、菜单、表单…… 错误选择后重新开发的成本很高。 公认的解决方案必须是响应友好的。 负保证金 -没有React 绝对位置 -没有兄弟姐妹的...
CSS 提供了多种定位模型，如静态定位、相对定位、绝对定位、固定定位和粘性定位。这些定位方式都是为了帮助开发者更好地控制元素在页面上的位置和排列。 1. 静态定位（Static Positioning）： 这是元素默认的定位...
本文将深入探讨CSS定位机制，包括static、relative、absolute、fixed以及flex和grid布局中的定位规则。 首先，我们要理解CSS的默认定位方式——`static`。这是每个元素的默认定位类型，它遵循正常的文档流，即元素...
在CSS中练习定位的一系列分类挑战 我该如何练习？ 1.首先，在系统上克隆存储库 git clone https://github.com/juniorcoders-ir/css-positioning.git 2.代码，实践：）
#### 文档流概述 在探讨HTML元素的CSS定位之前，我们先来了解一下文档流的概念。文档流是指页面元素根据其默认布局规则自然地从上到下、从左到右排列的过程。...希望本文能帮助大家更好地理解和应用这些CSS定位技术。
在CSS布局中，绝对定位（absolute positioning）是一种强大的定位机制，允许开发者精确地控制元素在网页上的位置。本文将深入探讨CSS绝对定位属性`absolute`的用法，并提供实例来帮助理解。 首先，理解`position`...
首先，我们要理解GPS（Global Positioning System）是全球定位系统，通常用于获取地理位置信息并进行导航。在网页设计中，模拟GPS地图可以提供一种交互式的用户体验，使用户能够跟随虚拟导航指示到达目的地。 这个...
今天我们将深入探讨“CSS定位与装饰”这一主题，这是Web开发中不可或缺的部分。"day07（CSS05-定位+装饰）.rar"这个压缩包包含了关于这一主题的学习资料，包括讲义、大纲和代码示例，为深入理解CSS定位和装饰提供了...
2. **定位（Positioning）**：包括相对定位、绝对定位和固定定位，可以精确控制元素的位置，其中相对定位是基于元素本身的位置，而绝对定位则基于最近的非静态定位祖先元素。 3. **背景图像（Background Image）**：...