2022-03-17 542
在77ISP学技术
每日笔记,CSS 布局 - positioning属性,滑动的div,如何布局div的位置
position 属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute 或 sticky)。
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值:
static
relative
fixed
absolute
sticky
元素其实是使用 top、bottom、left 和 right 属性定位的。但是,除非首先设置了 position 属性,否则这些属性将不起作用。根据不同的 position 值,它们的工作方式也不同。
HTML 元素默认情况下的定位方式为 static(静态)。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位;它始终根据页面的正常流进行定位:
这个 <div> 元素设置了 position: static;
这是所用的 CSS:
实例
div.static { position: static; border: 3px solid #73AD21; }
position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
position: fixed; 的元素是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。
请注意页面右下角的这个固定元素。这是所用的 CSS:
实例
div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21; }
原文链接:https://77isp.com/post/713.html
=========================================
https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台,请勿相信其他任何渠道。
数据库技术 2022-03-28
网站技术 2023-01-07
网站技术 2022-11-26
网站技术 2022-11-17
Windows相关 2022-02-23
网站技术 2023-01-14
Windows相关 2022-02-16
Windows相关 2022-02-16
Linux相关 2022-02-27
数据库技术 2022-02-20
小游客游戏攻略网游戏攻略网 2024年07月26日
抠敌 2023年10月23日
嚼餐 2023年10月23日
男忌 2023年10月22日
瓮仆 2023年10月22日
扫码二维码
获取最新动态