我的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;
}
这里是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>
按钮栏还没有任何按钮，文本只是一个占位符。我想让按钮栏在img标签下但它只是重叠了img。关于如何让它工作有什么想法吗?
您不需要在.theImage或.buttonBar中添加位置absolute或fixed
只要使用flex-direction: column;和buttonBardiv将在图像下。
jsfiddle: https://jsfiddle.net/aof6ysmn/