CSS如何使用绝对定位来显示div？

Question

我希望显示div 'class=perspectiveHomeMenu'在具有z-index:99的给定图像上方。

#perspective {
  display: none;
}
img {
  width: 100%;
  /*for demo*/
  height: 100px;
  /*for demo*/
}
.perspectiveContent-submenuMenu {
  display: none;
}
.perspectiveHomeContent {
  width: 65%;
  margin: 0% 5% 6%;
  background-color: rgb(241, 241, 241);
  float: left;
  padding: 0%;
}
.perspectiveHomeContent .imageAlign {
  float: left;
  width: 100%;
}
.contentHomeAlign {
  float: left;
  margin: 2% 3%;
  width: 98%;
  padding: 1%;
}
.perspectiveHomecontentImage iframe,
.perspectiveHomecontentImage img {
  width: 100% !important;
}
.contentHomeAlign .perspectiveContentHeading {
  font-size: 14pt;
  margin: 0% 0 0;
  color: rgb(106, 90, 148);
}
.perspectiveContentHeading a {
  color: rgb(106, 90, 148);
}
.contentHomeAlign p {
  font-size: 10pt;
}
.authorshomeLink {
  font-size: 11pt;
}
.perspectiveHomeMenu {
  background-color: rgb(106, 90, 148);
  /*-webkit-transform: skew(-20deg);*/
}
.perspectiveHomeMenu a {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(128, 70, 168, 1) 0%, rgba(163, 36, 168, 1) 100%) repeat scroll 0 0;
  font-size: 10pt;
  padding: 1%;
  float: right;
  position: relative;
  color: #ffffff;
}

<div class="banner">
  <img src="" alt="banner">
</div>
<div class="perspectiveContentsection">
  <div class="perspectiveHomeContent">
    <div class="imageAlign">
      <div class="perspectiveHomecontentImage">
        <img src="" alt="This is the image.Need to display blogs here">
      </div>
      <div class="perspectiveHomeMenu">
        <a>Blogs</a>
      </div>
    </div>
    <div class="contentHomeAlign">
      <div class="perspectiveContentHeading"><a>Title of the content</a>
      </div>
      <div class="authorshomeLink"><a>Test Author</a>
      </div>
      <div>sample body content.sample body content.sample body content.sample body content.sample body content.</div>
      <div class="perspectiveReadurl"><a>Read More</a>
      </div>
    </div>

  </div>
</div>

我想把博客显示在右上方的图像上。

- user3386779

Answer 1

将 <div class="perspectiveHomeMenu"> 移动到 <div class="perspectiveHomecontentImage"> 中，这是你的HTML中唯一的更改。

然后给它 position:relative;，并将 position:absolute; 应用于父 div。我编辑的 CSS 如下：

.perspectiveHomecontentImage{
    position:relative;
}
.perspectiveHomeMenu{
    background-color:rgb(106,90,148);
    /*-webkit-transform: skew(-20deg);*/
    position:absolute;
    right:0;
    top:0;
}

这是你的工作代码片段：

#perspective{
   display:none;
  }
img{
  width:100%; /*for demo*/
  height:100px;/*for demo*/
}
  .perspectiveContent-submenuMenu{
   display:none;
  }
  .perspectiveHomeContent{
 width:65%;
 margin:0% 5% 6%;
 background-color:rgb(241,241,241);
 float:left;
 padding:0%;
  }
  .perspectiveHomeContent .imageAlign
{
 float:left;
 width:100%;
}
.contentHomeAlign
{
 float:left;
 margin:2% 3%; 
 width:98%;
 padding:1%;
}
.perspectiveHomecontentImage iframe,.perspectiveHomecontentImage img{
 width:100% !important;
}
.contentHomeAlign .perspectiveContentHeading{
 font-size:14pt;
 margin:0% 0 0;
 color:rgb(106,90,148);
}
.perspectiveContentHeading a{
 color:rgb(106,90,148);
}
.contentHomeAlign p{
 font-size:10pt;
}
.authorshomeLink{
 font-size:11pt;
}
.perspectiveHomecontentImage{
  position:relative;
}
.perspectiveHomeMenu{
 background-color:rgb(106,90,148);
 /*-webkit-transform: skew(-20deg);*/
  position:absolute;
  right:0;
  top:0;
}
.perspectiveHomeMenu a{
 background:rgba(0, 0, 0, 0) linear-gradient(to right, rgba(128, 70, 168, 1) 0%, rgba(163, 36, 168, 1) 100%) repeat scroll 0 0;
 font-size:10pt;
 padding:5px;
 float:right;
 position:relative;
 color:#ffffff;
}

<div class="banner">
     <img src="" alt="banner">
 </div>
<div class="perspectiveContentsection">
             <div class="perspectiveHomeContent">
    <div class="imageAlign">
        <div class="perspectiveHomecontentImage">
       <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" alt="This is the image.Need to display blogs here">
                      <div class="perspectiveHomeMenu">
       <a>Blogs</a>
     </div>
    </div> 
    </div>
                <div class="contentHomeAlign">
    <div class="perspectiveContentHeading"><a>Title of the content</a></div>
    <div class="authorshomeLink"><a>Test Author</a></div>
    <div>sample body content.sample body content.sample body content.sample body content.sample body content.</div>
    <div class="perspectiveReadurl"><a>Read More</a></div>
    </div> 

   </div>
  </div>

- ab29007

Answer 2

使用相对定位并将父级 div 设为绝对定位。

.perspectiveHomecontentImage{
        position:relative;
    }
    .perspectiveHomeMenu{
        background-color:black;
        position:absolute;
        right:0;
        top:0;
    }

- Ashok choudhary