css for display the div in absolute position

我想在z-index：99的图像上显示div'class = perspectiveHomeMenu'。

#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>

---

Move the <div class="perspectiveHomeMenu"> into the <div class="perspectiveHomecontentImage"> , that is the only change in your HTML.

Then give it position:relative; and the position:absolute; to the parent div. The css I edited is below:

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

Here's your working snippet:

#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>

---

使用相对位置并使父div完全绝对。

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

链接地址: http://www.djcxy.com/p/94692.html

上一篇: 如何在反应原生android中实现Coach标记？

下一篇: css在绝对位置显示div