百度收录最快网站,商务封面图片素材,如何组建做网站的团队,本地郑州网站建设position 属性规定应用于元素的定位方法的类型#xff08;static、relative、fixed、absolute 或 sticky#xff09;。
常见的固定定位#xff0c;例如手机端的导航#xff0c;快捷按钮。例如本站的“返回顶部”按钮以及荷花图片#xff0c;都是固定在浏览器右边位置的。…position 属性规定应用于元素的定位方法的类型static、relative、fixed、absolute 或 sticky。
常见的固定定位例如手机端的导航快捷按钮。例如本站的“返回顶部”按钮以及荷花图片都是固定在浏览器右边位置的。 元素其实是使用 top、bottom、left 和 right 属性定位的。但是除非首先设置了 position 属性否则这些属性将不起作用。根据不同的 position 值它们的工作方式也不同。
一、position: static
HTML 元素默认情况下的定位方式为 static静态。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位它始终根据页面的正常流进行定位
举例
!DOCTYPE html
htmlheadmeta charsetutf-8title7.1 position定位/title/headstylediv {position: static;border: 3px solid #73AD21;text-align: center;}/stylebodydivh2《游子吟》/h2p慈母手中线游子身上衣。/pp临行密密缝意恐迟迟归。/pp谁言寸草心报得三春晖。/p/div/body
/html 运行后如图 二、position: relative;
position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
举例
!DOCTYPE html
htmlheadmeta charsetutf-8title7.1 position定位/title/headstylediv {position: relative;left: 30px;border: 3px solid #73AD21;text-align: center;}/stylebodydivh2《游子吟》/h2p慈母手中线游子身上衣。/pp临行密密缝意恐迟迟归。/pp谁言寸草心报得三春晖。/p/div/body
/html 运行后如图 三、position: fixed;
position: fixed; 的元素是相对于视口定位的这意味着即使滚动页面它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
举例
!DOCTYPE html
htmlheadmeta charsetutf-8title7.1 position定位/title/headstylediv {text-align: center;}span {position: fixed;bottom: 0;right: 0;width: 60px;height: 60px;text-align: center;line-height: 60px;border: 3px solid #73AD21;}/stylebodydivh2《游子吟》/h2p慈母手中线游子身上衣。/pp临行密密缝意恐迟迟归。/pp谁言寸草心报得三春晖。/p/divspan点赞/span/body
/html
运行后如图: 四、position: absolute;
position: absolute; 的元素相对于最近的定位祖先元素进行定位而不是相对于视口定位如 fixed。
然而如果绝对定位的元素没有祖先它将使用文档主体body并随页面滚动一起移动。
注意“被定位的”元素是其位置除 static 以外的任何元素。
举例
!DOCTYPE html
htmlheadmeta charsetutf-8title7.1 position定位/title/headstylediv.relative {position: relative;width: 400px;height: 200px;border: 3px solid #8faaa2;}span.absolute {position: absolute;top: 30px;right: 10px;width: 60px;height: 60px;line-height: 60px;text-align: center;border: 3px solid #55aa7f;}/stylebodydiv classrelativeh2《游子吟》/h2p慈母手中线游子身上衣。/pp临行密密缝意恐迟迟归。/pp谁言寸草心报得三春晖。/pspan classabsolute点赞/span/div/body
/html
运行后如图 说明此例注意和上一个例子区分开span是在div父元素里面只有父元素定位relative才能使span元素absolute定位生效。
五、position: sticky;
position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对relative和固定fixed之间切换。起先它会被相对定位直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置比如 position:fixed。
例如
!DOCTYPE html
htmlheadmeta charsetutf-8title7.1 position定位/title/headstylediv.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50;}/stylebodyp请试着在这个框架内b滚动/b页面以理解粘性定位的原理。/pdiv classsticky我是有粘性的/divdiv stylepadding-bottom:2000pxp在此例中当您到达元素的滚动位置时粘性元素将停留在页面顶部top: 0。/pp向上滚动以消除粘性。/pp一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramusrepudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus./pp一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramusrepudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus./p/div/body
/html
运行后如图 详解 CSS position定位的五种方式_网页制作_青青个人博客
