CSS 绝对定位的用法

注意一点,绝对定义要和相对定位放一起,才能达到想要的效果

<div style="position:relative;">
   <input id="F_Icon" type="text" class="form-control" placeholder="请选择图标" />
   <span id="selectIcon" class="mk-input-button" title="选取图标">...</span>
</div>

mk-input-button是绝对定位

.mk-input-button {

  1. position: absolute;
  2. right: 0px;
  3. top: 0px;
  4. width: 16px;
  5. height: 100%;
  6. line-height: 28px;
  7. cursor: pointer;
  8. z-index: 10;
  9. overflow: hidden;

}

 

必须把他放在一个相对定位的div里面,才能达到这样的效果

CSS 绝对定位的用法

如果去掉外层的相对定位div,这个绝对的位置就跑了

CSS 绝对定位的用法