CSS. 定位元素

本教程将帮助您正确学习CSS位置.

Position属性通常用于将元素放置到屏幕上所需的位置. 让我们看看还有什么选择.

Static

HTML 元素默认定位为静态. 静态定位元素总是根据页面的正常流程进行定位.

静态定位的元素不受top、bottom、left和right属性的影响.

不需要在CSS文件中指定静态位置，除非您需要重置之前设置的其他位置值.

	div.a{
    	位置:静态;
        }

Relative

相对定位元素相对于其正常位置进行定位. 你可以使用" top "和" left "属性来影响元素的位置.

	div.b{
    	位置:相对;
        top:20px;
        left:20px;
        }

相对定位元素的内容可以移动，并与其他元素重叠, 但是为元素保留的空间仍然保留在正常流中.

相对定位的元素通常用作绝对定位元素的父块.

Absolute

绝对位置元素相对于具有非静态位置的第一个父元素进行定位. If no such element is found, the containing block is

	div.c{
    	位置:绝对的;
        top:20px;
        left:20px;
        }

下图显示了类为“c”且绝对位置的div在类为“b”且相对位置的div中的行为

下面你可以看到绝对定位元素没有任何相对定位元素的情况.

Fixed

具有固定位置的元素相对于 browser window. 即使滚动窗口，它也不会移动

	div.c{
    	位置:固定;
        top:20px;
        left:20px;
        }

固定位置的元件从正常流动中移除. 文档和其他元素的行为就像固定位置元素不存在一样.

您可以从下面了解更多关于元素定位的信息 article

别忘了复习我们的 Bootstrap管理主题 并了解更多有关CSS功能的信息.