代码之家 › 专栏 › 技术社区 › stimulate

父母相对于孩子的位置

css-position css html

0

stimulate · 技术社区 · 6 年前

基本上,我希望将孩子相对于屏幕定位,但不是将其从其父母的流动中取出,而是移动所有带着孩子的父母。

我的目标是使一个可聚焦的div水平填充屏幕,就像它被放大一样。父元素应该溢出屏幕。基本上我想要这个效果:

Parent
    Child
/Parent

nt
Child
ent

请注意父对象是如何溢出屏幕左边缘的。

如何使用CSS实现这一点?

0 回复 | 直到 6 年前

1

ray 6 年前

// adjusts the container's margin to align the focused item
const focusHandler = ({target}) => {
  // get the left position of the focused element.
  const {left} = target.getBoundingClientRect();

  // get the left position of the container.
  const {left: containerLeft} = container.getBoundingClientRect();

  // adjust the container's left margin
  container.style.marginLeft = `${containerLeft - left}px`;
}

// listen for all focusin events on the container
const container = document.querySelector('.container');
container.addEventListener('focusin', focusHandler);

.container {
  font-family: sans-serif;
  display: flex;
  width: 100vw; /* prevent the container from getting wider as the margin changes */
}

.container div {
  flex: 1 1 auto;
  background: #eee;
  padding: 16px;
  margin: 8px;
}

.container :focus {
  background: bisque;
  color: tomato;
}

<div class="container">
  <div tabindex="0">Item 1</div>
  <div tabindex="0">Item 2</div>
  <div tabindex="0">Item 3</div>
  <div tabindex="0">Item 4</div>
  <div tabindex="0">Item 5</div>
  <div tabindex="0">Item 6</div> 
</div>