Dreamweaver定位怎么用？快速掌握技巧？-建站教程-锦华智联科技

Dreamweaver 定位终极教程：从入门到精通

在网页设计中，定位是控制元素位置的核心技术，它让你能够摆脱默认的文档流，将元素精确地放置在你想要的任何位置，在 Dreamweaver 中，你可以通过其强大的“CSS 设计器”面板,以可视化的方式轻松实现复杂的定位布局。

（图片来源网络，侵删）

第一部分：核心概念 - 理解定位模型

在开始操作前，必须先理解三个核心概念：定位模式、定位上下文 和 偏移属性。

定位模式

这是你通过 position 属性为元素设置的类型，Dreamweaver 的“CSS 设计器”中,定位模式通常有以下几种：

静态定位
- 值: static
- 描述: 这是所有元素的默认值，元素遵循正常的文档流（从上到下，从左到右），设置 top, right, bottom, left 属性对静态定位的元素无效。
- 何时使用: 当你希望元素保持其默认排列方式时。
相对定位
（图片来源网络，侵删）
- 值: relative
- 描述: 元素仍然在文档流中，但你可以通过 top, right, bottom, left 属性相对于其原始位置进行偏移，它原来的位置会保留，即它下面的元素不会“挤上来”。
- 何时使用: 微调元素位置，常作为绝对定位元素的“定位上下文”。
绝对定位
- 值: absolute
- 描述: 元素会从正常的文档流中完全移除，它不再占据任何空间，可以与其他元素重叠，它的位置是相对于其最近的已定位祖先元素（即 position 不为 static 的元素）来计算的，如果没有这样的祖先，它将相对于 <body> 元素定位。
- 何时使用: 创建弹出菜单、图片叠加、对话框等需要脱离文档流的元素。
固定定位
- 值: fixed
- 描述: 与绝对定位类似，元素也会脱离文档流，但它相对于浏览器窗口（视口 viewport）进行定位，而不是相对于某个祖先元素，这意味着当你滚动页面时,固定定位的元素会始终停留在同一个位置。
- 何时使用: 创建固定在顶部的导航栏、返回顶部按钮、页脚信息栏等。
粘性定位
- 值: sticky
- 描述: 这是 relative 和 fixed 的混合体，元素在跨越特定阈值前为相对定位,之后为固定定位。
- 如何工作: 你需要为元素设置 top, right, bottom, 或 left 中的一个阈值，当页面滚动到该阈值时，元素就会“粘”在指定位置。
- 何时使用: 创建滚动时“吸顶”的章节标题或导航栏。

定位上下文

这是绝对定位、固定定位和粘性定位的参考系。

（图片来源网络，侵删）

绝对定位 的上下文是其最近的已定位祖先元素。
固定定位 的上下文永远是浏览器窗口。
粘性定位 的上下文是其父元素。

如何设置定位上下文？ 只需将父元素的 position 属性设置为 relative, absolute, fixed 或 sticky 即可，这个父元素就成为了其内部所有绝对定位子元素的“坐标系原点”。

偏移属性

这些属性用于精确控制元素在定位上下文中的位置：

top: 元素上边缘距离定位上下文上边缘的距离。
right: 元素右边缘距离定位上下文右边缘的距离。
bottom: 元素下边缘距离定位上下文下边缘的距离。
left: 元素左边缘距离定位上下文左边缘的距离。

第二部分：在 Dreamweaver 中的实践操作

Dreamweaver 的“CSS 设计器”让定位变得直观。

准备工作：创建一个测试页面

打开 Dreamweaver，新建一个 HTML5 文件。
切换到 “实时视图” 或 “实时代码”,方便预览。
在 <body> 标签内，输入以下 HTML 结构作为我们的测试对象：

<div class="container">
  <h1>定位容器</h1>
  <div class="box relative-box">相对定位盒子</div>
  <div class="box absolute-box">绝对定位盒子</div>
  <div class="box fixed-box">固定定位盒子</div>
  <p>这是一些文本内容，用于观察文档流的变化，滚动页面，看看固定定位的盒子会发生什么。</p>
</div>

操作步骤

打开 CSS 设计器
- 在 Dreamweaver 右侧面板组中，找到并点击 “CSS 设计器”。
选择要定位的元素
- 在设计视图中，点击你想要应用定位的元素（先点击“相对定位盒子”）。
- “CSS 设计器”面板中的 “选择器” 部分会自动高亮显示该元素的类名（如 .relative-box）。
设置定位模式
- 在“CSS 设计器”面板中，找到 “定位” 部分（通常在“布局”或“盒”模型附近，是一个带有十字准星和坐标轴的图标）。
- 点击“定位模式”下拉菜单，选择你想要的模式（如 relative）。
设置偏移属性
- 一旦你选择了非 static 的定位模式（如 relative, absolute），下方的 “位置” 区域就会被激活，显示出 top, right, bottom, left 四个输入框。
- 你可以直接在这些输入框中输入数值，并选择单位（如 px, em, , vh 等）。
- 示例： 为 .relative-box 设置 top: 20px 和 left: 20px,然后观察它在设计视图中的变化。
创建定位上下文（关键步骤！）
- 现在我们想让“绝对定位盒子”相对于“定位容器”来定位。
- 在设计视图中，点击“定位容器” <div class="container">。
- 在“CSS 设计器”中，为其“定位模式”设置为 relative。注意：我们通常不需要为这个容器设置任何偏移量，relative 的目的仅仅是“建立坐标系”。
- 点击“绝对定位盒子” <div class="absolute-box">。
- 在其“定位”设置中，模式设为 absolute。
- 在“位置”区域，设置 top: 0 和 left: 0，这个盒子就会出现在“定位容器”的左上角。

第三部分：实战案例 - 创建一个带图片说明的卡片

这个案例将结合定位和浮动（Flexbox 是更现代的选择，但定位原理相通）,实现一个经典的图片布局。

目标： 图片在左，文字在右,图片上有一个半透明的标题覆盖层。

HTML 结构：

<div class="card">
  <img src="https://via.placeholder.com/300x200" alt="示例图片">
  <div class="overlay-title">这是一个覆盖标题</div>
</div>

CSS 实现（在 Dreamweaver 中操作）：

为 .card 设置相对定位，作为定位上下文。
- 在设计视图中，选中 <div class="card">。
- 在“CSS 设计器”中，将其“定位模式”设置为 relative，这是最关键的一步，确保后面的 .overlay-title 能相对于这个卡片定位。
为图片设置样式。
- 选中 <img>
- 在“CSS 设计器”的“布局”或“盒”模型中，设置 width 为 100%,让图片填满卡片。



创建覆盖层 .overlay-title。

选中 <div class="overlay-title">。
在“CSS 设计器”中，进行如下设置：
定位模式: absolute
位置:
bottom: 0 (让覆盖层底部对齐卡片底部)
left: 0 (让覆盖层左边缘对齐卡片左边缘)
right: 0 (让覆盖层右边缘对齐卡片右边缘)


背景: 点击“背景”部分，设置 background-color 为一个带透明度的颜色，rgba(0, 0, 0, 0.5)。
文本: 在“文本”部分，设置 color 为 white，text-align 为 center，padding 为 10px。


完成以上步骤后,你就能看到一个专业的图片卡片效果了。

第四部分：常见问题与技巧
问题 1：为什么我的绝对定位元素跑到页面左上角去了？
原因： 它没有找到“已定位的祖先元素”，所以默认相对于 <body>（也就是整个页面）进行定位。
解决方法： 检查它的父元素、祖父元素的 position 属性，确保至少有一个是 relative, absolute, fixed 或 sticky，在 Dreamweaver 中，只需选中父元素，将其定位模式设为 relative 即可。
问题 2：如何让一个元素在屏幕水平和垂直方向上都居中？
使用 transform (推荐，最灵活)
这是目前最流行和强大的方法。

将元素的定位模式设为 absolute 或 fixed。
设置 top: 50% 和 left: 50%,这会让元素的左上角位于屏幕中心。
添加 transform 属性：translate(-50%, -50%)，这个属性会将元素自身向左和向上移动其自身宽度和高度的 50%,从而完美实现居中。

在 Dreamweaver 中：

选中元素，定位模式设为 absolute。
设置 top: 50%, left: 50%。
在“CSS 设计器”中找到“变换”（Transform）部分，勾选 translate，然后分别设置 X 和 Y 为 -50%。

使用 Flexbox (更现代的布局方式)
如果父元素是 Flex 容器,则居中变得非常简单。

选中父元素，在“CSS 设计器”的“布局”部分，勾选 display 下的 Flex。
在 Flexbox 布局选项中，将 justify-content 设为 center，align-items 设为 center。

问题 3：如何控制元素的层级（谁在上，谁在下）？
使用 z-index 属性。

值: 数字（可以是正数、负数或 0）。
规则:
z-index 值越大的元素，显示层级越高（越靠近用户）。
z-index 值越小的元素,显示层级越低。
如果未设置 z-index，则按照 HTML 代码中出现的顺序（后来者居上）进行堆叠。



在 Dreamweaver 中操作：

选中需要调整层级的元素。
在“CSS 设计器”的“定位”部分，找到 z-index 输入框,输入一个数字即可。



掌握 Dreamweaver 中的定位，关键在于理解其背后的 CSS 原理：

选择定位模式：根据需求选择 static, relative, absolute, fixed 或 sticky。
建立定位上下文：为父元素设置 relative,为绝对定位子元素提供参考系。
精确偏移：使用 top, right, bottom, left 控制位置。
调整层级：使用 z-index 管理元素堆叠顺序。

通过 Dreamweaver 可视化的“CSS 设计器”，你可以将这些概念直接应用到你的网页元素上，快速构建出复杂而精美的布局，多加练习,你很快就能熟练运用这项强大的技术。