CODEWITHSUNDEEP
htmlcssflexboxcss-position
Juan S.
Juan S.

Reputation: 33

Flexbox and absolute positioning not working in Chrome and Safari

I have a button class with the following styles:

.button {
  align-items: center;
  background-color: #fff;
  border: 2px solid;
  border-color: #f48120;
  color: #f48120;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 5px;
  padding: 3px 10px;
  position: relative;
  text-transform: lowercase;
}

.button::after {
  background-color: #fff;
  bottom: -4px;
  content: '\f111';
  display: flex;
  font-family: 'FontAwesome';
  font-size: 5px;
  justify-content: center;
  position: absolute;
  width: 25%;
}
<button class="button">Enviar</button>

If I uncheck and then check again the "position: absolute" attribute in the inspector, the circle gets aligned in the center. Is this a Blink/Webkit bug?

Upvotes: 1

Views: 3387

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371361

Four things to consider:

  1. Flex items that are absolutely-positioned do not accept flex properties from the parent. Because they are out-of-flow, absolutely-positioned children of a flex container are removed from a flex formatting context and return to a block formatting context (or other box model).

  2. HTML <button> elements cannot be flex containers.

  3. Absolutely-positioned flex items may not be removed from the normal flow in some browsers.

  4. Center text over an image in flexbox

Upvotes: 1

Dejan.S
Dejan.S

Reputation: 19138

Absolute elements wont get positioned by the parents aligns. Just position it with left and transform it to center it.

just a sidenote, there is no need to use display: flex; on the absolute element.

.button {
  align-items: center;
  background-color: deeppink;
  border: 2px solid;
  border-color: aqua;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 5px;
  padding: 3px 10px;
  position: relative;
  text-transform: lowercase;
}

.button:after {
  content: '';
  background-color: deepskyblue;
  bottom: -4px;
  font-size: 5px;
  position: absolute;
  width: 25%;
  height: 10px;
  left: 50%;
  transform: translateX(-50%);
}
<button type="button" class="button">Submit</button>

Upvotes: 3

Related Questions