html设置相对定位代码怎么写,Web前端⾯试题第⼋道—绝对定
位与相对定位web网页代码解释
banana
相对定位(relative)：
先说相对定位：跟它的名⼀样，相对嘛，要有⼀个参照物，但这个参照不是别的，是它⾃⼰在原来⽂档流中的位置。相对定位之后的对象并没有完全从⽂档流中脱离，这个对象原来在⽂档中的位置保留着(站着茅坑不拉屎)，偏移后的对象会把其它的层遮罩住。
将相对定位特征总结如下：使用js提交表单
①相对定位的元素，在没有设置宽度的情况下，宽度是整个浏览器的宽度，或者是依赖于⽗元素的宽度。
②相对定位的块状元素相对于原来位置移动，移动后仍然占据⽂档流的位置，不影响其他元素的布局
下⾯通过代码进⾏验证
web前端基础面试题
excel制作下拉菜单在浏览器中放置5个盒⼦，⽤不同的颜⾊来表⽰，代码如下
HTML代码
CSS代码
最初效果图
给第三个盒⼦设置相对定位
元素相对于原来位置偏移，宽⾼都没变，撑⼤了容器，还占据着原来在⽂档流中的位置，对其它元素的布局没有产⽣影响。
绝对定位(absolute)：
被绝对定位的对象将从⽂档流中脱离，绝对定位的参照位置就不再是⾃⼰了，是哪个，就看它的上级或上上级有没有定位了，使⽤
left，right，top， bottom等属性相对于其最接近的⼀个有相对或者绝对定位设置的⽗级对象进⾏绝对定位，如果⽗级没有设置定位属性，则会相对于html根元素进⾏定位，看了⼀些帖⼦发现有⼈认为如果⽗对象没有设置定位属性，则会相对于body进⾏定位，这个说法是不对的。
将绝对定位的特征总结如下：
①绝对定位的块状元素在没有设置宽度的情况下，宽度由元素⾥⾯的内容决定
②脱离后原来的位置相当于是空的，下⾯的元素会来占据位置
③绝对定位的对象相对于距离⾃⼰最近的设置了相对定位或者绝对定位的⽗对象进⾏定位
④如果⽗元素没有定位，则相对于html根元素定位
下边还是通过这五个盒⼦的偏移来验证
javascript百炼成仙怎么样
(1)块元素⽆偏移值
上边的5个盒⼦，只给box5⼀个绝对定位，⽆偏移值。此时块状元素只是漂浮在原来的位置，如果后边还有块状元素，将会占据他在⽂档流中的位置，我们在box5下边加上⼀个box6看⼀下效果。
说明：绝对定位的块状元素在没有定义宽度的情况下，宽度由元素⾥⾯的内容决定。
效果图如下
加⼀个box6的效果
从图中可以看出，box6已经占据了box5在⽂档流中的位置了。
(2)有偏移值
如果设置了偏移值⽽⽗元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位(即html元素，注意是相对于根元素，⽽不是相对于body)⽤box5的偏移来验证。
①给box5⼀个偏移量，⽗元素没有相对或者绝对定位
效果图如下
②给box5同样的偏移量，给body元素⼀个绝对定位(body元素设置为了absolute，绝对定位的块状元素的宽度由最长p决定，宽度变⼩了)：
效果图如下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。