符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章主要讲解了“css定位怎么设置”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css定位怎么设置”吧!
成都创新互联公司专注于蜀山企业网站建设,响应式网站,商城网站建设。蜀山网站建设公司,为蜀山等地区提供建站服务。全流程按需设计,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务
static:positon定位的默认值,没有定位设置top跟left无效
relative:生成相对定位的元素,相对于其正常位置进行定位,一般在子元素设置absoute定位时,给父元素设置relative元素的位置通过top、right、bottom、left 控制,其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)
上图中我们给father块元素加了一个向左向上各100px的相对定位,father的父元素就是body,所以father相对于body进行偏移,son块元素在加上相对定位后,由于他是在father下的子元素,假如father没有加定位,那么son是相对于body进行偏移的,实际上上图中father有加上定位,所以son是相对于father进行偏移,不是相对bady进行偏移。总结:
相对定位都是相对于父元素左上角进行偏移,假如没父元素就一层一层往上找
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位,元素的位置通过top、right、bottom、left 控制
首先absolute是相对于
static 定位以外的第一个父元素进行定位
,浅显说就是相对于有设定位属性,但不包含定位属性为static的父元素进行定位,只需父元素有设定位为relative或者absolute 等等都可以相对其进行定位。其次top跟left是相对于父元素左上角进行定位,right跟bottom是相对于父元素右下角进行定位
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位,和absoute
的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)
元素的位置通过top、right、bottom、left 控制
通过上图我们给son的父元素加了相对定位,但在给子元素加fixed时我们发现son元素是相对于浏览器窗口进行定位的,父元素对其毫无限制作用
sticky:它的体现就像position:relative和position:fixed的合体:
浅显说就是在页面不进行滚动时他体现出来的特性就是relative,但当页面进行滚动时他体现出来就是fixed的特性
定义一个元素在文档中的层叠顺序,适用于定义position的元素
当使用定位有多层叠在一起可以通过z-index属性定义来定义什么元素排在最上面,比方有些弹窗显示需要有个蒙层在加弹窗内容,这时需要用定位把蒙层先定位在内容上面进行遮盖,在把弹窗内容定位在蒙层上,这时就需要z-index进行定位什么元素显示在上面,通过设置弹窗的z-inde值大于蒙层的z-index值即可以实现弹窗在蒙层之上
值为auto时表示对象无剪切,比方一个宽高为100px的元素,clip: rect(auto auto auto auto)跟clip: rect(0px 100px 100px 0px)都表示不会对元素进行剪裁,第一个值表示从上往下剪裁到设定值,为0就是从上面剪裁到0px也就是不剪裁,第二个值表示从右边剪裁到设定值,100就表示从右边剪裁到宽度100px的位置,也就没有剪裁效果
感谢各位的阅读,以上就是“css定位怎么设置”的内容了,经过本文的学习后,相信大家对css定位怎么设置这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!