Question

html对象浮动在redbox div上方。我怎么能把它保存在redbox div中。我尝试了几个选项，比如反转div。某种程度上，对象是代理潜水，然后例如img标签。我不知道为什么，在互联网上搜索并没有找到解决方案。我希望有人可以帮助我并解释我做错了什么。

.redbox{
      background-color: red;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: block;
      line-height: 1.42857;
      margin-bottom: 20px;
      padding: 4px;
      transition: border 0.2s ease-in-out 0s;
      width:25%; 
      height: 200px; 
      
}
.redbox object {
  position:absolute;
  top:0;
  left:0;
  width:100%;
   height:25%;
 }
 .redbox .caption {
    color: #333;
    padding: 9px;
}

  <html>
  <head>
  </head>
  <body> 
  
  <div class="redbox">
  <object data="https://mozilla.github.io/pdf.js/web/viewer.html" type="application/pdf"></object>
  <div class ="caption">
  here is some text
  </div>
  </div>
  
  </body>

Answer 1

我认为你可以使用Z-Index财产。

我在这里提供修改后的代码，请检查一次。

.redbox{
      background-color: red;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: block;
      line-height: 1.42857;
      margin-bottom: 20px;
      padding: 4px;
      transition: border 0.2s ease-in-out 0s;
      width:25%; 
      height: 200px; 
      z-index : 1;
}
.redbox object {
  position:absolute;
  top:0;
  left:0;
  width:100%;
   height:25%;
   z-index:-1;
 }
 .redbox .caption {
    color: #333;
    padding: 9px;
}

    <html>
      <head>
      </head>
      <body> 
      
		<div class="redbox">
		<object data="https://mozilla.github.io/pdf.js/web/viewer.html" type="application/pdf"></object>
		<div class ="caption">
		here is some text
		</div>
		</div>
      
      </body>
	</html>

如何将html对象元素放在div中

1 个答案: