HTML5定位

这里写图片描述
这里写图片描述
理解:
position:
relative:是以原来的位置来移动的,所以要保留原来的位置,所以还在文档流中。
absolute:是以父类的左上角(其实是4个角中一个,我爱用左上角)来定位
top和left 左上角
left和bottom 左下角
bottom和right;右下角
righ和top 右上角
fixed:(同理上面的4个角来定位)就是固定在浏览器的内容一个地方,不会移动,就是浏览器向下时,他也跟着向下,(小广告)

static:默认,没有定位【还在文档流中】
这里写图片描述

relative:相对定位,基准是自身原来的位置【还在文档流中】
这里写图片描述
这里写图片描述
相对定位的盒子原来的位置会被保留下来,所以用清除浮动的话就没效果,清除浮动是认原来的位置的
**相对定位没有脱离文档流就是有位置保留
绝对定位脱离文档流就是位置没有保留**
偏移量:设置定位后,可以使用left/top和right/bottom,设置偏移量
这里写图片描述
这里写图片描述
absolute:绝对定位,基准是已定位的祖先元素,无则使用固定定位【脱离文档流】
这里写图片描述
常用方式:父元素使用相对定位,子元素使用绝对定位并偏移
示例1: 轮播广告
这里写图片描述
这里写图片描述
上面的还可以用在下面这样的例子
这里写图片描述
示例2:下拉菜单
这里写图片描述
这里写图片描述
然后
这里写图片描述
下拉菜单就是父类用相对定位,但是不移动位置(所有的就不变),而子类用的是绝对定位,设置位置。
然后有关超链接的lv-ha的理解就是所有的标签都可以用这个样式,那么上面的还有一个小知识点就是让子类在鼠标未触碰父类时,让它
display:none; 不显示,且不占位置;
visibility:hidden; 不显示,但会占位置。
而在鼠标触碰父类时(也就是悬浮父类时)让子类以块显示出来。
这里写图片描述
下拉菜单就是用父类用相对定位,子类用绝对定位(父类在link时子类display:none ,父类 hover时子类display:block或者是line)
fixed:固定定位,基准是浏览器内容区的四个角【脱离文档流】

left配合top: 左上角
left配合bottom: 左下角
right配合top: 右上角
right配合bottom: 右下角
类似浏览器的小广告
这里写图片描述
浏览器窗口就是显示内容的部分
定位小结
这里写图片描述
这里写图片描述
这里写图片描述
其中提到的层次见另一个博文HTML中z-index

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值