css在绝对位置显示div
我想在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> 将<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>使用相对位置并使父div完全绝对。
.perspectiveHomecontentImage{
position:relative;
}
.perspectiveHomeMenu{
background-color:black;
position:absolute;
right:0;
top:0;
}