在 Safari 中使用 flexbox 进行绝对定位 [英] Absolutely positioning with flexbox in Safari

问题描述

根据 caniuse，Safari 完全支持 FlexBox.

我只是尝试使用 flexbox 将一些不同大小的 div 堆叠在一起.我真的很好奇为什么这在 Chrome/Firefox 中有效，但在 Safari 中无效:

<div class="inner-one"></div><div class="inner-two"></div>

.container {宽度:15rem；高度:15rem；边界半径:50%；背景颜色:蓝色；显示:弹性；对齐项目:居中；对齐内容:居中；}.container div {位置:绝对；}.inner-one {宽度:13rem；高度:13rem；边界半径:50%；背景颜色:绿色；}.内二{宽度:11rem；高度:11rem；边界半径:50%；背景颜色:紫色；}

在此处查看 JSFiddle:https://jsfiddle.net/19n95exf/3/>

解决方案

因为position: absolute;打破display:flex，使用transform:translate代码>代替

 .container {位置:相对；宽度:15rem；高度:15rem；边界半径:50%；背景颜色:蓝色；}.container div {边界半径:50%；位置:绝对；顶部:50%；左:50%；变换:翻译(-50%，-50%)；}.inner-one {宽度:13rem；高度:13rem；背景颜色:绿色；}.内二{宽度:11rem；高度:11rem；背景颜色:紫色；}

 
<div class="inner-one"></div><div class="inner-two"></div>

<小时>

或者给内部元素一个左/上值

 .container {宽度:15rem；高度:15rem；边界半径:50%；背景颜色:蓝色；显示:弹性；对齐项目:居中；对齐内容:居中；}.container div {边界半径:50%；位置:绝对；}.inner-one {左:1.5rem；顶部:1.5rem；宽度:13rem；高度:13rem；背景颜色:绿色；}.内二{左:2.5rem；顶部:2.5rem；宽度:11rem；高度:11rem；背景颜色:紫色；}

<div class="inner-one"></div><div class="inner-two"></div>

Safari has full support for FlexBox according to caniuse.

I am simply trying to stack some differently sized div's on top of each other using flexbox. I am genuinely curious as to why this works in Chrome/Firefox but not in Safari:

<div class="container">
  <div class="inner-one"></div>
  <div class="inner-two"></div>
</div>

.container {
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background-color: blue;

  display: flex;
  align-items: center;
  justify-content: center;
}

.container div {
  position: absolute;
}

.inner-one {
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  background-color: green;
}

.inner-two {
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background-color: purple;
}

See JSFiddle here: https://jsfiddle.net/19n95exf/3/

解决方案

Because position: absolute; break display: flex, use transform: translate instead

    .container {
      position: relative;
      width: 15rem;
      height: 15rem;
      border-radius: 50%;
      background-color: blue;
    }

    .container div {
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

    .inner-one {
      width: 13rem;
      height: 13rem;
      background-color: green;
    }

    .inner-two {
      width: 11rem;
      height: 11rem;
      background-color: purple;
    }

    <div class="container">
      <div class="inner-one"></div>
      <div class="inner-two"></div>
    </div>

---

Or give the inner elements a left/top value

    .container {
      width: 15rem;
      height: 15rem;
      border-radius: 50%;
      background-color: blue;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container div {
      border-radius: 50%;
      position: absolute;
    }

    .inner-one {
      left: 1.5rem;
      top: 1.5rem;
      width: 13rem;
      height: 13rem;
      background-color: green;
    }

    .inner-two {
      left: 2.5rem;
      top: 2.5rem;
      width: 11rem;
      height: 11rem;
      background-color: purple;
    }

<div class="container">
      <div class="inner-one"></div>
      <div class="inner-two"></div>
</div>

这篇关于在 Safari 中使用 flexbox 进行绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！