一、需求分析及核心开发要点
----
要实现如下功能 , 下图 粉色 部分是 整体 父容器 , 紫色元素 是 中心的核心位置 , 蓝色是左上角的浮标 , 红色是右下角的浮标 ;
首先分析父容器元素..., 需要覆盖 内边距范围 ,
此处不能使用浮动 , 浮动可以在标准流上方浮动显示 , 但是不能覆盖到 内边距范围 ;
也不能使用 相对定位 , 相对定位会保留元素原始位置 , 其它标准流元素无法使用该位置...;
因此此处只能使用绝对定位 , 在设置了相对定位的父元素容器中 , 可以使用绝对定位在父容器的任意位置显示任何元素 ;
/* 绝对定位元素 - 左上角 */
.top {
/* 子元素设置绝对定位...*/
right: 0;
/* 内容尺寸 */
width: 80px;
height: 80px;
background-color: red;
}
二、完整代码示例...----
完整代码示例 :
<!