在我们使用 San 开发的时候，我们常常会写各种的组件，当一个父组件的子组件是绝对定位组件(比如：Select、Tip 等)的时候，我们会遇到两种场景：

  • 场景一：父(祖)组件足够大或不存在 overflow: hidden;
  • 场景二：父(祖)组件不够大且存在 overflow: hidden;

而这两种情形下，我们需要对绝对定位组件的 DOM 做一些处理。

那针对这两种场景我们分别可以如何处理呢？

如何处理

场景一

父(祖)组件足够大或不存在 overflow: hidden; 时的绝对定位。

这种情况比较常规，我们可以直接引入组件，然后可选择在外部或组件内部包含一个 (not static) 元素，来控制显示即可。

使用
  1. class AbsComponent extends san.Component {
  2.     static template = `
  3.         <div>
  4.             <p class="absolute">子绝对定位组件</p>
  5.         </div>
  6.     `;
  7. }
  9. class Parent extends san.Component {
  10.     static template = `
  11.         <div>
  12.             <div class="parent-rel">
  13.                 <h3>父是static</h3>
  14.                 <abs-comp></abs-comp>
  15.             </div>
  16.         </div>
  17.     `;
  19.     static components = {
  20.         'abs-comp': AbsComponent
  21.     };
  22. }
  24. new Parent().attach(document.querySelector('#paIsRel'));
示例

See the Pen
position-absolute-dom
by dengxiaohong (@The-only)
on CodePen.

场景二

父(祖)组件不够大且存在 overflow: hidden; 时的绝对定位。

这种情况会很常见，如果直接包含的话绝对定位元素会因为父(祖)组件有overflow: hidden;且不够大而导致组件中超出部分被遮住。

若不想被遮住的话，我们可以在组件中做一层处理：

  • 将组件元素挂到 body 上
  • 需要显示的时候进行位置控制
  • 父组件调用
使用
  1. class AbsComponent extends san.Component {
  2.     static template = `
  3.         <div class="abs-wrap">
  4.             <div class="abs" style="{{mainStyle}}">
  5.                 show content
  6.             </div>
  7.         </div>
  8.     `;
  10.     initData() {
  11.         return {
  12.             targetElem: document.body,
  13.             mainStyle: ''
  14.         };
  15.     }
  17.     attached() {
  18.         // 将绝对定位元素放在body上
  19.         if (this.el.parentNode !== document.body) {
  20.             document.body.appendChild(this.el);
  21.         }
  23.         // 显示的时候进行位置控制
  24.         this.changePosition();
  25.     }
  27.     /**
  28.      * 调整位置信息
  29.      */
  30.     changePosition() {
  31.         // 这里可以替换成封装的组件来进行位置控制
  32.         let targetElem = this.data.get('targetElem');
  33.         targetElem = typeof targetElem === 'function' ? targetElem() : targetElem;
  35.         let rect = targetElem.getBoundingClientRect();
  36.         let left = rect.left;
  37.         let top = document.body.scrollTop + rect.top + rect.height;
  39.         let str = 'left:' + left + 'px;top:' + top + 'px;';
  40.         this.data.set('mainStyle', str);
  41.     }
  42. }
  44. class Parent extends san.Component {
  45.     static template = `
  46.         <div>
  47.             <p class="info">父元素100px overflow:hidden;</p>
  48.             <div class="parent-wrap">
  49.                 <span class="btn">click toggle</span>
  50.                 <abs-comp targetElem="{{getTarget}}"></abs-comp>
  51.             </div>
  52.         </div>
  53.     `;
  55.     static components = {
  56.         'abs-comp': AbsComponent
  57.     };
  59.     initData() {
  60.         return {
  61.             getTarget: this.getTarget.bind(this)
  62.         };
  63.     }
  65.     /**
  66.      * 获取相对定位的元素
  67.      *
  68.      * @return {HTMLElemnt} 相对定位的元素
  69.      */
  70.     getTarget() {
  71.         return this.el.querySelector('.btn');
  72.     }
  73. }
  75. new Parent().attach(document.querySelector('#instance'));
示例

See the Pen
position-absolute-dom
by dengxiaohong (@The-only)
on CodePen.