长春做企业网站多少钱,永兴网站开发,开发手机软件,分销商城与基础商城的区别一、相对定位
相对元素自身所在的原来的位置进行定位#xff0c;可以设置 left#xff0c;right#xff0c;top#xff0c;bottom四个属性。
效果#xff1a;在进行相对定位以后#xff0c;元素原来所在的位置被保留了#xff0c;既保留占位#xff0c;其他元素的位置…一、相对定位
相对元素自身所在的原来的位置进行定位可以设置 leftrighttopbottom四个属性。
效果在进行相对定位以后元素原来所在的位置被保留了既保留占位其他元素的位置不会发生移动。
!DOCTYPE html
htmlheadmeta charsetUTF-8title相对定位/title
/headbodydiv stylewidth: 500px;height: 500px; background-color: pink;div stylewidth: 100px; height: 100px; background-color: yellow;position: relative;left: 100px;/divdiv stylewidth: 100px; height: 100px; background-color: red;/divdiv stylewidth: 100px; height: 100px; background-color: green;/div/div
/body/html
效果展示 相对定位的应用场合 1元素在小范围移动的时候 2结合绝对定位使用
属性z-index设置堆叠顺序设置元素谁在上谁在下。z-index的值大的在上方 注意z-index属性要设置在定位的元素上
!DOCTYPE html
htmlheadmeta charsetUTF-8titlez-index/title
/headbodydiv stylewidth: 500px;height: 500px; background-color: pink;divstylewidth: 100px; height: 100px; background-color: yellow;position: relative;left: 50px;top: 50px;z-index: 10;/divdiv stylewidth: 100px; height: 100px; background-color: red;position: relative;z-index: 5;/divdiv stylewidth: 100px; height: 100px; background-color: green;/div/div
/body/html
效果展示 二、绝对定位
!DOCTYPE html
htmlheadmeta charsetUTF-8title绝对定位/titlestyle typetext/css#outer {width: 200px;height: 200px;background-color: royalblue;margin-left: 100px;}#div1 {width: 100px;height: 100px;background-color: thistle;position: absolute;left: 30px;top: 30px;}#div2 {width: 100px;height: 100px;background-color: forestgreen;}/style
/headbodydiv idouterdiv iddiv11/divdiv iddiv22/div/div
/body/html
效果展示 div1脱离了文档流div2上去补位了 实际开发中我们往往让子元素在父元素中发生位移效果 配合定位来使用
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#outer {width: 200px;height: 200px;background-color: pink;margin-left: 100px;position: relative;}#div1 {width: 100px;height: 100px;background-color: cornflowerblue;position: absolute;left: 30px;top: 30px;}#div2 {width: 100px;height: 100px;background-color: coral;}/style
/headbodydiv idouterdiv iddiv11/divdiv iddiv22/div/div
/body/html
效果展示 总结 当给一个元素设置了绝对定位的时候它相对谁变化呢它会向上一层一层的找父级节点是否有定位如果直到找到body了也没有定位那么就相对body进行变化如果父级节点有定位绝对定位相对定位固定定位但是一般我们会配合使用父级为相对定位当前元素为绝对定位这样这个元素就会相对父级位置产生变化。无论是上面的哪一种都会释放原来的位置然后其他元素会占用那个位置。 开发中建议使用父级节点relative定位子级节点使用绝对定位。
三、固定定位
应用场合在页面过长的时候将某个元素固定在浏览器的某个位置上当拉动滚动条的时候这个元素位置不动。
!DOCTYPE html
htmlheadmeta charsetUTF-8title固定定位/titlestyle typetext/css#div {background-color: red;width: 50px;height: 200px;position: fixed;right: 0px;top: 300px;}/style
/headbodydiv iddiv1/div
/body/html
