一文带你了解什么是CSS定位

资讯 3年前

1.2K

君言不得意，归卧南山陲。大家好，我是IT共享者，人称皮皮。这篇我们来讲讲CSS定位。一、Position（定位）CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么

君言不得意，归卧南山陲。大家好，我是IT共享者，人称皮皮。这篇我们来讲讲CSS定位。

一、Position（定位）

CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

二、属性

1． Static 定位（默认效果）

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top， bottom， left， right影响。

2． Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

＜！DOCTYPE html＞＜html＞＜meta charset＝＂utf－8＂＞＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞＜head＞＜style＞ p．pos＿fixed ｛ position： fixed； top： 30px； right： 5px；｝＜／style＞＜／head＞
＜body＞
＜p class＝＂pos＿fixed＂＞Some more text＜／p＞＜p＞＜b＞Note：＜／b＞代码使人进步！！！．＜／p＞＜p＞Some text＜／p＞＜p＞Some text＜／p＞＜p＞Some text＜／p＞＜p＞Some text＜／p＞
＜／body＞
＜／html＞

注意：

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

3． Relative 定位

相对定位元素的定位是相对其正常位置。

＜！DOCTYPE html＞＜html＞＜meta charset＝＂utf－8＂＞＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞＜title＞定位＜／title＞
＜head＞＜style＞ h2．pos＿left ｛ position： relative； left：－20px；｝
h2．pos＿right ｛ position： relative； left： 20px；｝＜／style＞＜／head＞
＜body style＝＂background－color：azure；＂＞
＜p＞Some more text＜／p＞＜p＞＜b＞Note：＜／b＞代码使人进步！！！．＜／p＞＜h2 class＝＂pos＿left＂＞This heading is moved left according to its normal position＜／h2＞＜h2 class＝＂pos＿right＂＞This heading is moved right according to its normal position＜／h2＞
＜／body＞
＜／html＞