html,css定位
您的位置: 主页 > web前端文章 > html5 >

html页面简单定位原理【访问量:192】

静态定位”是指我们一直在处理的页面的正常流程。在CSS盒模型,彩车,和Flexbox的布局方案都在这个“静”流操作,但是这不是在CSS中唯一可用的定位方案。

css-positioning-schemes-790d5b.png

其他三种类型的定位是“相对”,“绝对”和“固定”。它们中的每一个都允许您使用特定的坐标手动定位元素,与flexbox和float中的更多语义选项相反。先进的定位不是说“将盒子放在容器的中心位置”,而是先说明一些事情,比如“把这个盒子放在其父母的起源的右侧20个像素和50个像素”。 网页上的绝大多数元素应根据页面的静态流程进行布局。当你想要做更高级的事情时,这些其他的定位方案会起作用,比如调整特定元素的位置或者动画UI组件,而不会弄乱周围的元素。 本章分为两部分。我们将首先检查绝对的相对位置,绝对位置和固定位置,然后将我们学到的所有内容应用到花哨的下拉菜单中。

CSS position属性允许您更改特定元素的定位方案。如你所想,它的默认值是 static。当元素的position属性 不具有值时static,它被称为“定位元素”。定位元素是整个章节的内容。

positioned-elements-terminology-861fca.png

可以混合搭配不同的定位方案。同样,大部分网页都应该静态定位,但通常在其他元素中找到相对且绝对定位的元素,这些元素是页面正常流程的一部分。


相对定位”将元素相 对于它们通常出现在页面的静态流中的位置移动。当默认流程稍微偏离时,这对于轻推盒子很有用。

css-relative-positioning-26842e.png

.item-relative {  position: relative;  top: 30px;  left: 30px;}

该position: relative;线使得它定位的元素,以及top和left属性让你定义它是如何远离其静止位置偏移。这就像为元素设置一个(x,y)坐标。

relative-positioning-screenshot-4c23c2.png

相对定位与边距的工作方式相似,其中一个非常重要的区别是:周围的元素或父元素都不受&top和left值的影响。其他任何东西都呈现为仿佛.item-relative处于其原始位置。考虑浏览器完成页面布局后应用的偏移量。 在top和left从原包装盒的顶部和左侧边缘分别特性测量。我们可以使用bottom和right 属性相对于其他边缘进行偏移。

relative-positioning-offsets-494268.png

例如,以下内容将会在相反的方向上推动该框:

.item-relative {
position: relative;
bottom: 30px;
right: 30px;
}

请注意,这些属性接受负值,这意味着有两种方式可以指定相同的偏移量。我们可以很容易地用来top: -30px;代替bottom: 30px;上面的声明。


“绝对定位”就像相对定位一样,但是偏移是相对于整个浏览器窗口而不是元素的原始位置。由于与页面的静态流不再有任何关系,因此可以认为这是布局元素的最手动方式。

css-absolute-positioning-228ce0.png

让我们通过将下面的规则添加到我们的样式表来看看:

.item-absolute {
position: absolute;
top: 10px;
left: 10px;
}

我们的HTML结构与前一个示例完全相同,但这会将紫色图像粘贴到浏览器窗口的左上角。您还可以尝试设置一个值bottom或一个right值,以更清楚地了解正在发生的事情。

absolute-positioning-screenshot-641ad7.png

“固定定位”与绝对定位有许多共同之处:它是非常手动的,元素从页面的正常流程中移除,并且坐标系统相对于整个浏览器窗口。关键的区别是固定的元素不会随页面的其余部分一起滚动。

css-fixed-positioning-342eff.png

.item-fixed {
position: fixed;
bottom: 0;
right: 0;
}

这会将红色图像放置在屏幕的右下角。尝试滚动页面,您会发现它不会随页面上的其他元素一起移动,而绝对定位的紫色图像则会移动。 这使您可以创建始终保持在屏幕上的导航栏,以及永不消失的恼人的弹出式横幅。    

 我们以前从来不需要处理“深度”问题。直到现在,我们所有的HTML元素都以直观的方式呈现在彼此之上或之下。但是,由于我们正在做先进的东西,依靠浏览器来确定哪些元素出现在其他元素之上并不会削减它。 该z-index属性允许您控制页面上元素的深度。如果您将屏幕视为3D空间,则负值 z-index会进入页面的更远处,而正面页面会从页面中移出。

css-z-index-c87ef0.png

换句话说,.features-menu元素需要z-index比特征标签更低。默认z-index值是0,所以我们让它们都比它高。我们方便地将特征 标签包装在一个中,允许我们通过一个子选择器对其进行设计,如下所示:



2018-04-04
下一篇:HTML5本地存储
匿名评论

最新推荐