सीएसएस पूर्ण स्थिति में div प्रदर्शित करने के लिए

मैं जेड-इंडेक्स: 99 के साथ देने वाली छवि पर div 'class = perspectiveHomeMenu' प्रदर्शित करना चाहता हूं।सीएसएस पूर्ण स्थिति में div प्रदर्शित करने के लिए

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

मैं सही शीर्ष पक्ष पर, ब्लॉग प्रदर्शित करने के लिए छवि पर

स्रोत

2017-01-10 user3386779

<div class="perspectiveHomecontentImage"> में <div class="perspectiveHomeMenu"> ले जाएँ चाहते हैं, कि आपके HTML में केवल परिवर्तन है।

फिर इसे position:relative; और position:absolute; को मूल div में दें। सीएसएस मैं संपादित नीचे है:

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

यहाँ अपने काम का टुकड़ा है:

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

स्रोत

2017-01-10 04:59:31 ab29007

उपयोग रिश्तेदार की स्थिति और माता पिता div पूर्ण बनाते हैं।

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

स्रोत

2017-01-10 05:04:43

सीएसएस पूर्ण स्थिति में div प्रदर्शित करने के लिए

उत्तर

संबंधित मुद्दे