相对、绝对和静态定位
选择与作业匹配的位置类型。Relative 将元素从其正常位置移动而不会移动其邻居。Abolute 将其放置在最近定位父级内部的精确偏移处。Static 和 Default 保持正常页面流。每个设备的位置类型可能有所不同,因此元素可以在桌面上重叠并坐在手机上的流中。
- 相对定位:微调对齐,就像将图标向左移动几个像素一样。
- 绝对定位:将徽章、装饰形状或标签放置在部分内的任何位置。
- 需要在访问者滚动时将某些内容固定在屏幕上?在小部件和容器上使用 Elementor 自己的位置设置中的"固定"选项。
各方偏移,加上来自中心
Px、em 或 % 中设置顶部、右侧、底部及左侧,包括将元素推过其父级边缘的负值。将 “NEW” 徽章从产品卡的顶部 10px 和右侧 15px 放置。从中心选项将元素从其父级的水平中心偏移,这有助于实现中心重叠效果。
- 四边控制:设置距父级所有四个边缘的距离。
- 从中心:位置从父级的中间而不是左边缘。
- 每个设备的 Z 索引:当事情重叠时决定哪个元素位于顶部。
- 该面板警告您不要将左侧和中间组合在同一元素上。
定位常见问题
这与 Elementor 自己的位置设置有何不同?
Elementor 在小部件和容器上的位置设置提供默认、绝对和固定,具有一个水平和垂直偏移。Master Addons 扩展添加了相对和静态,让您设置所有四个侧面,添加了 From Center 偏移,让每个设备的位置类型发生变化,并且还适用于经典部分和列。它不包括固定,因此使用 Elementor 的设置来设置滚动时应保持在屏幕上的元素。
当我使用绝对定位时,它"相对"定位是什么?
1个绝对定位的元素放在位置不是静态的最近父级内部,如果没有父级设置位置,则从页面的更上方的父级测量偏移量,该元素最终可能在意想不到的地方避免,选择容纳该元素的容器或列,并首先将其位置类型设置为相对。
这在移动设备和平板电脑上可以正常工作吗?
是位置类型,所有四个偏移,From Center和Z-Index分别接受桌面,平板电脑和移动设备的单独值,从左侧放置在桌面上的100px的元素可以从手机屏幕上掉下来,因此切换到平板电脑和移动视图并调整那里的数字,您还可以在移动设备上将位置类型设置为静态,以将元素放回正常布局中。
我可以用它来制作一个独特的形状部分或从容器中冲出吗?
Yes。将容器设置为Relative,在里面放置一个图像或形状,将该元素设置为Absolute,并给它一个负偏移,如Left:-50px。元素挂在容器边缘,这是大多数重叠的英雄和卡牌设计是如何构建的。
