定位的元素确实已经脱离了文本流,但依旧存在于浏览器窗口中,而且你也没设置不可见,那么作为浏览器,他必然会给你显示出来。
如果不想看见,给包含这个元素的父元素添加 overflow:hidden; 这样就会将其隐藏起来。
<div> 图片、文字 </div>。
一般我是同过 设置 padding(补白) margin(边距)等样式来在页面上排版,
有一些就是position 是在整个页面上定位。
=================================。
position : static; /* 无定位 */。
position : relative; /* 依物件左上角为基准取相当位置 */。
position : absolute; /* 依网页左上角为基准取绝对位置 */。
position : fixed; /* 固定位置不受滚动条影响 */。
===================================。
设置了position属性 然后直接{top:100px;}还可以用margin-top:-100px;。
margin在设置了position 后可以 为负值例如“-100px;。
”
第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。
background-position:0% 0%; 这表示背景图片的左上角与容器的左上角对齐?的确是这个现象,但话不能这么说,因为 background-position 计算位置时用的并不是背景图片的左上角作为基点。
background-position 是将背景图片的中心点作为基点 如上图,容器是 400px * 400px,背景图片是 200px * 200px,上图是:background-position:50% 50%。 那么 background-position:0% 0% 时:第一个 0% 就代表背景图片的中心点与左边红线重合。
第二个 0% 就代表背景图片的中心点与上边红线生命。 那么 background-position:100% 100% 时:第一个 100% 就代表背景图片的中心点与右边红线重合;第二个 100% 就代表背景图片的中心点与下边红线生命。 也就是说在 0%-100% 之间,图片的中心点被限制在一个范围内: 这个范围距离容器左边缘右边缘均是背景图片宽度 / 2。
说简单一点好了,left是横坐标位置表示背景图片的左边紧贴标签左边,100%则是纵坐标位置表示背景图片上边紧贴标签下边或者说是背景图片完全的往下移动图片高度100%的距离,如果是0或者top的话应该是图标上边紧贴标签上边的,说的明白不?