深圳网站设计 建设首选,唐山建设集团下岗职工网站,wordpress 评论时间,做网站主题定位#xff1a; - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素 - 通过position属性来设置元素的定位 -可选值#xff1a; static#xff1a; [sttik] 默认值#xff0c;元素没有开启定位 relative#xff1a; [relətiv] 开启元素…定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素 - 通过position属性来设置元素的定位 -可选值 static [stætik] 默认值元素没有开启定位 relative [relətiv] 开启元素的相对定位 absolute [æbsəlju:t] 开启元素的绝对定位 fixed开启元素的固定定位也是绝对定位的一种 sticky [stiki] 开启元素的粘滞定位 当position属性值设置为absolute时则开启了元素的绝对定位
绝对定位 1.开启绝对定位会使元素脱离文档流 2.开启绝对定位以后如果不设置偏移量则元素的位置不会发生变化 3.绝对定位是相对于离他最近的包含块定位的 一般情况开启了子元素的绝对定位都会同时开启父元素的相对定位 父相子绝 4.绝对定位会使元素提升一个层级 5.绝对定位会改变元素的性质开启BFC属性内联元素变成行内块元素块元素的宽度和高度默认都被内容撑开 包含块containing block -正常情况下离当前元素最近的祖先块元素 -定位情况下离他最近的开启了定位的祖先元素 如果所有的祖先元素都没有开启定位则会相对于浏览器窗口进行定位html 根元素初始包含块
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 200px;height: 200px;background-color: yellow;position: absolute; left: 0px;top: 0px;bottom:0px}.box3{width: 200px;height: 200px;background-color: yellowgreen;}.inner{width: 300px;height: 300px;background-color: orange;/*开启inner的相对定位*/position: relative;}.outer{width: 400px;height: 400px;background-color: #ccc;/*开启outer的相对定位*//* position: relative; */}.s1{/* width: 100px;height: 100px; */background-color: pink;/*开启绝对定位*//* position: absolute; */}/style/headbodydiv classbox1/divdiv classouterdiv classinnerdiv classbox2/div/div/divdiv classbox3/divspan classs1我是一个span/span/body
/html
