网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

css定位怎么设置

这篇文章主要讲解了“css定位怎么设置”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css定位怎么设置”吧!

成都创新互联公司专注于蜀山企业网站建设,响应式网站,商城网站建设。蜀山网站建设公司,为蜀山等地区提供建站服务。全流程按需设计,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务

定位

1.position

  • static:positon定位的默认值,没有定位
    设置top跟left无效

  • relative:生成相对定位的元素,相对于其正常位置进行定位,一般在子元素设置absoute定位时,给父元素设置relative元素的位置通过top、right、bottom、left  控制,其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)
    css定位怎么设置

上图中我们给father块元素加了一个向左向上各100px的相对定位,father的父元素就是body,所以father相对于body进行偏移,son块元素在加上相对定位后,由于他是在father下的子元素,假如father没有加定位,那么son是相对于body进行偏移的,实际上上图中father有加上定位,所以son是相对于father进行偏移,不是相对bady进行偏移。总结:相对定位都是相对于父元素左上角进行偏移,假如没父元素就一层一层往上找

  • absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位,元素的位置通过top、right、bottom、left  控制
    css定位怎么设置

首先absolute是相对于static 定位以外的第一个父元素进行定位,浅显说就是相对于有设定位属性,但不包含定位属性为static的父元素进行定位,只需父元素有设定位为relative或者absolute 等等都可以相对其进行定位。其次top跟left是相对于父元素左上角进行定位,right跟bottom是相对于父元素右下角进行定位

  • fixed 生成绝对定位的元素,相对于浏览器窗口进行定位,和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)元素的位置通过top、right、bottom、left  控制
    css定位怎么设置

通过上图我们给son的父元素加了相对定位,但在给子元素加fixed时我们发现son元素是相对于浏览器窗口进行定位的,父元素对其毫无限制作用

  • sticky:它的体现就像position:relative和position:fixed的合体:

浅显说就是在页面不进行滚动时他体现出来的特性就是relative,但当页面进行滚动时他体现出来就是fixed的特性

2.z-index

定义一个元素在文档中的层叠顺序,适用于定义position的元素

当使用定位有多层叠在一起可以通过z-index属性定义来定义什么元素排在最上面,比方有些弹窗显示需要有个蒙层在加弹窗内容,这时需要用定位把蒙层先定位在内容上面进行遮盖,在把弹窗内容定位在蒙层上,这时就需要z-index进行定位什么元素显示在上面,通过设置弹窗的z-inde值大于蒙层的z-index值即可以实现弹窗在蒙层之上

3.clip:定义了元素的哪一部分是可见的。区域外的部分是透明的,适用于绝对定位元素

值为auto时表示对象无剪切,比方一个宽高为100px的元素,clip: rect(auto auto auto auto)跟clip: rect(0px 100px 100px 0px)都表示不会对元素进行剪裁,第一个值表示从上往下剪裁到设定值,为0就是从上面剪裁到0px也就是不剪裁,第二个值表示从右边剪裁到设定值,100就表示从右边剪裁到宽度100px的位置,也就没有剪裁效果

感谢各位的阅读,以上就是“css定位怎么设置”的内容了,经过本文的学习后,相信大家对css定位怎么设置这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


当前题目:css定位怎么设置
分享地址:http://bjjierui.cn/article/ggciph.html

其他资讯