2

I am styling a page with flexbox. I had a nicely centered image inside a div with a background image.

body {
  width: 700px
}

nav {
  width: 100%;
  height: 50px;
  background-color: #ccc
}

.wrapper,
.banner {
  display: flex
}

.wrapper {
  flex-direction: column
}

.banner {
  background-image: url("https://unsplash.it/1000/600/?random");
  background-repeat: no-repeat;
  background-position: center center;
  height: 300px;
}

.banner img {
  height: 140px;
  width: 140px;
  border-radius: 140px;
  border: 3px solid #fff;
  align-self: center;
  margin: auto;
}
<nav>

</nav>
<article class="wrapper">
  <section class="banner">
    <img id="profile-pic" src="https://unsplash.it/100/100/?random" />
  </section>
</article>

See this codepen:

https://codepen.io/efbbrown/pen/PmOpWo

Now I want to add an x button so the user can change the background image if they please. When I add the button div it pushes the centered image out of position.

Added element:

<section class="banner">
  <div class="close-button"></div>
  <img id="profile-pic" src="https://unsplash.it/100/100/?random"></img>
</section>

See this codepen for full dilemma:

https://codepen.io/efbbrown/pen/PmOpOq

How can I add this x button to the div without changing the positioning of the center image?

Thanks!

Eugene Brown
  • 4,032
  • 6
  • 33
  • 47

1 Answers1

2

Flex box will change the position and width of items based on the number of items contained inside the flex element. This means that when you add the close button, your banner image is now centering based on the remaining space, not the full width. You can "remove" an item from the flexbox formatting by changing it's position to absolute. That element is now ignored by the flexbox, as it will position it's self.

This should do the trick:

.banner {
    /* ... */
    position: relative;
}

.close-button {
    /* ... */
    position: absolute;
    /* ... */
}

EDIT

Answer to questions from the comments below: Absolute positioning is not always determined by the width and height of the screen or window. It's actually determined by the closest 'positioned' parent, for example a parent marked as position: relative.

Using relative and absolute together is where absolute position really works well. In this example you can mark the banner class as position relative and wherever you move that div to, the close button will follow and position based on the banner div.

Jason Lemrond
  • 407
  • 2
  • 7
  • Is there a way to do this without position: absolute? I still want to position the button relative to its parent, in that I want to be able to change the height of the nav and whatever other sections may appear above the banner without having to change the styling of the close-button. – Eugene Brown May 06 '17 at 23:41
  • 1
    Absolute positioning is not always determined by the width and height of the screen or window. It's actually determined by the closest parent marked as `position: relative`. Using relative and absolute together is where absolute position really works well. You can mark the banner class as position `relative` and wherever you move that div to, the close button will follow and position based on the banner div. – Jason Lemrond May 06 '17 at 23:47
  • 1
    Edited my answer to show how the banner class should be set up. – Jason Lemrond May 06 '17 at 23:48
  • Yo that's it! Thanks so much! – Eugene Brown May 06 '17 at 23:51