网站怎么做搜索功能,wordpress页面怎么使用方法,赵县住房和城乡建设局网站首页,可拖拽html网页编辑器CSS相对定位和绝对定位的区别
区别1#xff1a;相对的对象不同 相对定位是相对于自己绝对定位是相对于离自己最近的有定位的祖先 区别2:是否会脱离文档流 相对定位不会脱离文档流#xff0c;不会影响其他元素的位置绝对定位会脱离文档流#xff0c;会影响其他元素的布局 代…CSS相对定位和绝对定位的区别
区别1相对的对象不同 相对定位是相对于自己绝对定位是相对于离自己最近的有定位的祖先 区别2:是否会脱离文档流 相对定位不会脱离文档流不会影响其他元素的位置绝对定位会脱离文档流会影响其他元素的布局 代码演示
这是没有任何定位的代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- --style*{margin: 0;padding: 0;}.main{position: relative;width: 300px;height: 400px;margin: auto;margin-top: 30px;background-color: palegoldenrod;}.box1{width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palegreen;}.box2{width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palevioletred;}/style
/head
bodydiv classmaindiv classbox1/divdiv classbox2/div/div
/body
/html运行结果 给绿色容器加上相对定位
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- --style*{margin: 0;padding: 0;}.main{position: relative;width: 300px;height: 400px;margin: auto;margin-top: 30px;background-color: palegoldenrod;}.box1{position: relative;left: 50px;width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palegreen;}.box2{width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palevioletred;}/style
/head
bodydiv classmaindiv classbox1/divdiv classbox2/div/div
/body
/html给绿色容器加入相对定位
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- --style*{margin: 0;padding: 0;}.main{position: relative;width: 300px;height: 400px;margin: auto;margin-top: 30px;background-color: palegoldenrod;}.box1{position: absolute;left: 50px;width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palegreen;}.box2{width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palevioletred;}/style
/head
bodydiv classmaindiv classbox1/divdiv classbox2/div/div
/body
/html
