How Do I Start a New Row In a Fixed Position Flexbox?-CodePudding

This is my css:

.modal-backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.96);
  transition: width 1s ease-out;
}

.buttonBar {
  right: 0;
  height: 20px;
  color: red;
}

.theImage {
  position: absolute;
  top: 0;
  right: 0;
  width: 350px;
  height: 350px;
}

.button {
  float: left;
}

Here is the html:

    <head>
    <link rel="stylesheet" href="styles.css">
</head>
<div class="button">
    <button id="open">Test</button>
</div>
<div class="modal-backdrop">
    <img class="theImage" src=index.png />
    <div class="buttonBar">button bar</div>
</div>

<!-- page 108 -->
<script type="text/javascript">
    var button = document.getElementById('open');
    var drawer = document.getElementsByClassName('modal-backdrop')[0];
    var height = drawer.scrollHeight;
    var width = drawer.scrollWidth;
    button.addEventListener('click', function (event) {
    event.preventDefault();
    drawer.style.setProperty('width', '350px');
    drawer.style.setProperty('height', height   'px');
});
</script>

The button bar doesn't have any buttons in it yet and the text is just a placeholder. I want that button bar to go under the img tag but all it does is overlap the img. Any ideas on how to get this working?

CodePudding user response：

You don't need to add position absolute or fixed to .theImage or .buttonBar.

Just use flex-direction: column; and buttonBar div will be under image.

jsfiddle: https://jsfiddle.net/aof6ysmn/