css:html元素的定位
html元素的定位类型分为:固定定位、相对定位、绝对定位和粘性定位
在网页布局中,我们可以通过很多中方式来控制页面布局,比如表格布局、flex弹性布局以及浮动布局。
但是在这些方法中,我们可能用到了一些辅助技术,那就是定位。
元素的定位,用得好,就会带来事半功倍的效果,但是一不小心也会给自己挖坑,自己踩坑。
这就需要我们了解各种定位类型中的行为了。
我们给元素设置定位,是通过position属性来设置的,它默认的属性值是static,也就是静态定位,元素未被定位。
我们常用的几种布局方式,都是通过控制文档的方式,来实现我们想要的效果。然而定位则不同,定位是把元素脱离文档流,这样就导致被定位的元素可以与其他元素重叠。
固定定位
给元素设置固定定位:
div{position: fixed;
}
再通过top、left、right和bottom四个属性,就可以将元素固定到屏幕中的任意位置。
然而这四个属性的设置,在背后却暗暗定义了元素的宽高:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.hhh {position: fixed;top: 2rem;left: 2rem;right: 2rem;bottom: 2rem;border: 1px solid red;}</style>
</head><body><div class="hhh"></div>
</body></html>
如以上代码中,元素div并没有设置具体的宽高。但是效果如图:
那么在平常的页面布局中,常常使用来固定定位来实现:模态框、悬浮菜单或者悬浮导航等等效果。
绝对定位
决定定位,是相对于最近的祖先定位元素。同样的,属性top、right、bottom和left决定了元素的边缘位置。
经常和相对定位搭配使用。
相对定位
相对定位,是一个比较容易混淆的定位,因为我们给元素设置相对定位后,在页面中没有任何的视觉变化,相对定位的元素和它周围的元素,保持着原本的位置。
就算是设置top、left和right、bottom,效果也仅仅是将相对定位的元素移动位置,其他元素依旧没有变化。这样我们就可以认为相对定位,并没有让元素脱离当前文档流,元素依旧占据文档流中的位置。
小提示:
相对定位中的top、right、bottom和left属性并不能改变元素的大小,它们仅仅改变元素的位置。另外,top和bottom不能同时使用,因为bottom会被忽略,同样left和right也不能同时使用,因为right会被忽略。
我们在页面布局中,常常使用相对定位来给它的子元素的绝对定位创建一个包含块。
重叠和z-index
在使用定位的时候,经常会出现元素重叠或者元素移动到浏览器视口之外。
元素移动到视口之外,这个好理解,但是元素重叠,就不太容易找到本质原因了。
可能在面试时,我们常常给的答案是元素设置定位后,可能导致它脱离文档流,它和周边的元素就不处在同一个层次,就导致在视觉出现重叠的效果。
实质上是,浏览器在将html解析为DOM的同时,还创建了一个树形结构,叫做渲染树,它表示每一个元素的视觉样式和位置,同时决定了浏览器绘制元素的顺序。
通常情况下。元素在html里面出现的顺序决定了绘制顺序,这时,突然有个元素被设置定位了,浏览器先绘制非定位元素,所有的定位元素最后才绘制,这样就导致元素的顺序错乱而产生了重叠现象。
尽管出现重叠现象,我们可以通过设置z-index,来控制元素的层叠顺序。
粘性定位
粘性定位是相对定位和固定定位的结合体,通常情况下,元素是会随着页面滚动的,当达到屏幕的某个位置的时候,元素就固定在该位置。常见就是侧边栏、客服弹窗。
通过设置position:sticky,实现粘性定位,但是可能有些浏览器还没有支持这个属性,那就只有通过固定定位来实现了
这就就是我们常用的定位
css:html元素的定位相关推荐
- 八、CSS之元素的定位
八.元素的定位 8.0 CSS属性 - position 利用position属性可以对元素进行定位,让元素灵活布局, postion属性的值 static reative absolute fixe ...
- css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位 一 """ # #通过id # driver.find_element_by_css_selector(" ...
- html 相对于父标签位置,css子元素如何相对父元素定位?
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...
- HTML/CSS——子元素相对于父元素固定定位解决方案
基本概念 绝对定位(absolute):设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元 ...
- CSS 元素的定位之相对定位 position: relative
在CSS中,通过 position属性来对元素进行定位,可选的定位类型有 static | relative | absolute | fixed,默认值为 static,表示没有定位,元素保持在它原 ...
- ie自带css定位,CSS实现元素相对于浏览器窗口进行定位_css
文章简介:css实现相对浏览器窗口定位彻底研究. Web Developer / Designer 经常需要将一个元素"固定"在页面的某个位置.例如弹出窗口.漂浮广告位等--本文将 ...
- UI自动化测试(二)浏览器操作及对元素的定位方法(xpath定位和css定位详解)
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
- UI自动化测试(二)浏览器操作及对元素的定位方法(xpath定位和css定位详解)...
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
- 【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )
文章目录 一.Display 显示模式转换 二.块元素示例 三.inline-block 改元素为行内块元素示例 四.为块元素设置浮动 五.为块元素设置定位 一.Display 显示模式转换 disp ...
最新文章
- xshell与xftp使用注意
- BIEE连接数据库的方法
- Magento 2数据库EAV模型结构
- 如何使用分析模型 — 1. 关联图,从乱麻中里出头绪
- php时间跨度,在PHP中执行与日期时间相关的操作
- linux如何查看本机名称,Linux查看本机登陆用户信息(w、who、last和lastlog命令)...
- 08-图8 How Long Does It Take
- 引入ELK前需要知道的“坑”(上)
- php调用声卡,声卡转换器的作用是什么
- js把html转成json,js字符串转成JSON
- e站app里站hosts_流浪e站
- Web开发——Photoshop(PSD格式截取)
- matlab2015的marker,matlab中markersize什么意思
- html发起微信或支付宝支付,vue实现-微信网页中唤起支付宝支付
- c语言答案-贾宗璞 许合利,C语言习题答案贾宗璞许合利较全-.doc-资源下载在线文库www.lddoc.cn...
- 光伏并网发电系统MATLAB Simulink仿真设计 该仿真包括电池,BOOST升压电路,单相全桥逆变电路
- archlinux安装kde常见的问题(无法登录,黑屏,无法调节亮度等)
- Dynamics 365Online 使用adal.js注册和配置SimpleSPA应用程序
- 五款功能强大的国产软件,常常被误认为是外国人开发的
- 中兴历年笔试题自己收藏用03
热门文章
- 轻松上手CSS Grid网格布局
- 正负分数计算机在线算使用,分数的表示以及计算(c++)
- StoreFront配置本地安装Receiver客户端
- webstorm和网站制作
- C——W小J的编程采坑与进步绪篇
- 专业人士告诉你数据分析师适合女生吗?
- CANBridge 系列本安型智能 CAN 总线隔离中继器
- Spring AOP---基础简介
- Java中创建对象的六个步骤 细分后(new关键字)对象头详细介绍
- 【ESP32_8266_WiFi (十三)】ESP8266自动配网 – WiFiManager库使用说明