web前端|html教程
CSS学习笔记–定位position属性的学习
web前端-html教程
今天学习之前剩下的一个问题:CSS的position属性 。首先归纳出和position相关的问题:
微信上墙大屏幕源码,vscode 上下拆分,ubuntu 没有标题栏,tomcat关联应用,sqlite倒排索引,韩国和美国服务器,配送地址插件,前端Ui框架对比,手机网络代理工具爬虫,ubuntu启动php,seo优化企业网站,小说网站静态模板,html 5获取网页数据,简易个人主页模板下载,jsp页面布局,javaweb快递管理系统,程序商城lzw
position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什么特点?
wpf 绘图 源码,ubuntu安装教程16,局域网Tomcat项目访问,网络爬虫论文绪论,dfa敏感词过滤算法 php,扬州seo咨lzw
第一个问题:position作为一个属性,它一共有哪几个属性值?
shopnc java商城源码,vscode字体没有样式,ubuntu地址命令,项目tomcat路径修改,昌平爬虫店,php soa架构,佛山seo推广去哪里咨询,绿色电器公司网站psd模板,公司电子商务系统描述模板下载lzw
对于position属性,他一共有5个值,分别是
static:默认值。没有定位,元素出现在正常的流中。relative:生成相对定位的元素,相对于其正常位置进行定位。正常位置也就是指如果没有position属性它会出现的位置。absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。这里需要注意一下,absolute的参照对象是第一个拥有非static的position属性的父级元素,后面会详细解释。fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。规定应该从父元素继承 position 属性的值。
这种定义性质的问题,一般在W3cSchool上可以找到最标准的的答案,这5种属性的解释已经非常详细。其实我们在开发中经常用的只有relative、absolute、fixed这3个属性,另外当给元素增加了这是种属性中的任意一种,我们也就需要根据情况设置元素的left/top/right/bottom以及z-index, 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定,显示层级通过z-index控制。
第二个问题:position常用的属性值有哪几个?分别有什么特点?
上面已经提到了我们常用的3个属性值: relative、absolute、fixed。
relative:元素的position属性设置为relative后,这个元素会 以自己之前的位置为参照,根据设置的left等值进行移动。下面举个栗子~
代码的效果如下图:
第二个div是根据它之前的位置进行了移动, 并且它之前的位置并没有被后面的元素占据。红色的div被黄色的div遮盖是因为z-index的作用。
absolute:对于position属性是 static 定位以外的第一个父元素进行定位。这里需要详细分析一下这句话: 首先我们可以判断出,absolute定位参照的对象是它拥有定位属性的父级元素;然后,这个父级元素的position属性不能是static。
这里再想细一点:如果元素没有拥有position属性的父级元素怎么办? 这里我通过查资料确定了 这种情况它会根据标签也就是页面的根节点进行定位。(注意是标签)
下面将div2的position属性改为absolute查看效果:
这样我们就可以发现红色div移动之前的位置会被黄色的占据, 这时候其实表示红色的div已经脱离了文档流。
最后一个属性值:fixed.它的效果其实和absolute类似,都属于绝对定位, 但是它的参照则是固定的浏览器窗口。修改div2的position属性改为fixed后,滚动鼠标滚轴就可以查看效果,利用这个特性我们可以做出类似侧边悬浮窗(某些网站侧边的小广告(ノಠ益ಠ)ノ彡┻━┻)这样的效果。
其实,我在学习position过程中感觉到,掌握好元素的参照物是理解position属性的关键,确定好参照物,然后再根据属性值的类型判断后面的元素的状态,就能确定好元素的位置啦~
PS:通过这几天自己提问自己想办法解答的学习过程,真的收获很多。其实平时学习过程中忽略的细节还是很多的,经历了这样的一个过程自己的基础知识又扎实了不少~另外我还发现利用博客来分享知识更是个快乐的过程,又能提高编程技术又能提高表达能力,同时还有可能帮助到别人,所以一定要坚持下去!!(╰_╯)#
1月11日
不积跬步,无以至千里