资讯专栏INFORMATION COLUMN

htnl 定位

GeekGhc / 2686人阅读

摘要:如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块。

相对定位

相对定位:position:relative;

相对定位:相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上(即不设置position时的位置,然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动;

 

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

 

例如:

.box1{
  position: relative;
  left: 30px;
  top: 20px;
}

 

 

绝对定位

绝对定位:position:absolut;

绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)。

绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以 它们可以覆盖页面上其他的元素,且可以通过z-index属性来控制这些层的对方顺序。

 

 

例如:

.box2{
  position: absolute;
  left: 30px;
  top: 20px;
}

 

 








特此声明:如需转载请注明出处,如有疑问请及时提出以便于改正,如有侵权,联系删除,谢谢

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1595.html

相关文章

  • 面向对象的JavaScript之继承(一) 类式继承

    摘要:那你们肯定会问为什么共用,而没有共用呢,下面就给你解释,请看引用类型是共用的值类型是私用的。 引言 面向对象的编程语言都具继承这一机制,而 JavaScript 是基于原型(Prototype)面向对象程序设计,所以它的实现方式也是基于原型(Prototype)实现的. 继承的方式 类式继承 构造函数继承 组合继承 原型式继承 寄生式继承 寄生组合式继承 1.类式继承 //声明父...

    forsigner 评论0 收藏0
  • 面向对象的JavaScript之继承(二) 构造函数继承

    摘要:引言创建即继承构造函数继承何为构造函数如果你还不清楚构造函数和普通函数的区别那请看构造函数与普通函数构造函数继承构造函数继承的核心是或的使用通过这个方法改变函数的作用环境为父类添加方法声明子类子类通过将子类中的变量在父类中执行了一遍由 引言 创建即继承---构造函数继承 何为构造函数?如果你还不清楚构造函数和普通函数的区别,那请看JavaScript构造函数与普通函数 构造函数继承 构...

    laoLiueizo 评论0 收藏0
  • 图像映射——我的web前端自学之路进行时2

    摘要:一段感悟在说图像映射之前先说一段最近动态。正题图像映射指的是分割一块图像使得分割的每一部分都能单独有一个链接地址。而且浏览器会忽略超过图片界限的坐标。 一段感悟 在说图像映射之前先说一段最近动态。最近稍稍的深入学了一段时间的htnl与css,应该算是在打基础,其实在打基础之前我已经学习了一段时间js,jquery,backbone,angularJs,当时也知道要打好基础在去学习其他内...

    youkede 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<