css - 样式化子组件以显示在父组件的左侧

Question

我需要创建 CSS 样式来启动父组件左侧的组件。

我有以下结构：

----panelComponent(parent)
-------inputComponent(parent)
----------otherComponent(child)

我试图触发当用户触发otherComponentwhich is child of 时inputComponent，它出现在左侧，inputComponent因为组件位于屏幕左侧，而另一个组件没有以正确的方式显示。这就是问题：

inputComponent我想在（父级） 左侧显示带有网格的面板，如下图所示：

我用来在 inputComponent 中调用 otherComponent 的代码与此类似：

<div #parentReference></div>
<input>
  <span class="ra-ui-input-suffix">
    <ra-ui-icon-button
      (click)="openOtherComponent()"
    >
    </ra-ui-icon-button>
  </span>
</input>
<ng-template #otherComponent>
  <other-component></other-component>
</ng-template>

otherComponent旨在在调用它的组件下启动。我需要创建一个样式以otherComponent在父级的左侧启动。

标签： cssangularresponsive-designparent-child

Answer 1

它可能带来的问题多于解决的问题，但是如何操纵组件的定位呢？喜欢left: -100px; 特别是，如果父组件的宽度是固定的并且您可以对其进行硬编码。这里：我将把这个按钮移到它的父级之外：