css do wyświetlania div w pozycji absolutnej

Question

Chcę wyświetlić div "class = perspectiveHomeMenu" nad obrazem give z indeksem Z: 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>

chcę wyświetlić blog, nad obrazem po prawej górnej stronie

Answer 1

Przesuń <div class="perspectiveHomeMenu"> do <div class="perspectiveHomecontentImage">, że jest to jedyna zmiana w kodzie HTML.

Następnie należy podać position:relative; i position:absolute; do elementu nadrzędnego. Css edytowany jest poniżej:

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

Tu masz fragment pracy:

#perspective{ 
 
\t display:none; 
 
    } 
 
img{ 
 
    width:100%; /*for demo*/ 
 
    height:100px;/*for demo*/ 
 
} 
 
    .perspectiveContent-submenuMenu{ 
 
\t display:none; 
 
    } 
 
    .perspectiveHomeContent{ 
 
\t width:65%; 
 
\t margin:0% 5% 6%; 
 
\t background-color:rgb(241,241,241); 
 
\t float:left; 
 
\t padding:0%; 
 
    } 
 
    .perspectiveHomeContent .imageAlign 
 
{ 
 
\t float:left; 
 
\t width:100%; 
 
} 
 
.contentHomeAlign 
 
{ 
 
\t float:left; 
 
\t margin:2% 3%; \t 
 
\t width:98%; 
 
\t padding:1%; 
 
} 
 
.perspectiveHomecontentImage iframe,.perspectiveHomecontentImage img{ 
 
\t width:100% !important; 
 
} 
 
.contentHomeAlign .perspectiveContentHeading{ 
 
\t font-size:14pt; 
 
\t margin:0% 0 0; 
 
\t color:rgb(106,90,148); 
 
} 
 
.perspectiveContentHeading a{ 
 
\t color:rgb(106,90,148); 
 
} 
 
.contentHomeAlign p{ 
 
\t font-size:10pt; 
 
} 
 
.authorshomeLink{ 
 
\t font-size:11pt; 
 
} 
 
.perspectiveHomecontentImage{ 
 
    position:relative; 
 
} 
 
.perspectiveHomeMenu{ 
 
\t background-color:rgb(106,90,148); 
 
\t /*-webkit-transform: skew(-20deg);*/ 
 
    position:absolute; 
 
    right:0; 
 
    top:0; 
 
} 
 
.perspectiveHomeMenu a{ 
 
\t 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; 
 
\t font-size:10pt; 
 
\t padding:5px; 
 
\t float:right; 
 
\t position:relative; 
 
\t color:#ffffff; 
 
}

<div class="banner"> 
 
    <img src="" alt="banner"> 
 
</div> 
 
<div class="perspectiveContentsection"> 
 
      <div class="perspectiveHomeContent"> 
 
\t \t \t \t <div class="imageAlign"> 
 
\t \t \t \t  <div class="perspectiveHomecontentImage"> 
 
\t \t \t \t \t <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"> 
 
\t \t \t \t \t <a>Blogs</a> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> \t 
 
\t \t \t \t </div> 
 
       <div class="contentHomeAlign"> 
 
\t \t \t \t <div class="perspectiveContentHeading"><a>Title of the content</a></div> 
 
\t \t \t \t <div class="authorshomeLink"><a>Test Author</a></div> 
 
\t \t \t \t <div>sample body content.sample body content.sample body content.sample body content.sample body content.</div> 
 
\t \t \t \t <div class="perspectiveReadurl"><a>Read More</a></div> 
 
\t \t \t \t </div> \t 
 

 
\t \t \t </div> 
 
\t \t </div>

Answer 2

użycie względne położenie i zrobić rodzic div absolutna.

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