htnl 定位

GeekGhc 发布于2019-04-23 13:13 / 2600人阅读

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

相对定位

相对定位：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

HTNL5新特性之拖放

拖放API是H5专门为了鼠标拖放而新提供了7个事件，可以分成三个部分。一、拖动的源对象(source)可以触发的事件　　　　dragstart：拖动开始　　　　drag：拖动进行中　　　　dragend：拖动结束二、拖动的目标对象(target)可以触发的事件　　　　dragenter：拖动进入时　　　　dragover：源对象在目标对象上方时　　　　dragleave：拖动离开时...

morgan 2019-08-05 13:35 评论0 收藏0
面向对象的JavaScript之继承(一) 类式继承

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

forsigner 2019-08-20 14:21 评论0 收藏0
面向对象的JavaScript之继承(二) 构造函数继承

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

laoLiueizo 2019-08-20 14:22 评论0 收藏0
图像映射——我的web前端自学之路进行时2

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

youkede 2019-08-01 18:04 评论0 收藏0
图像映射——我的web前端自学之路进行时2

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

Gu_Yan 2019-08-05 12:28 评论0 收藏0