css проблема с отображением изображения в левой части css. asp.net

Question

У меня проблема с изображением девушки-девушки в asp.net. Я хочу, чтобы достичь следующего результата:

Вопрос заключается в том, что лицо девушки не появляется, как показано ниже:

Вот CSS я сделал:

.testimonialstilabel { 
    background-image: url(../images/testimonialstilabel.png); 
    height: 100px; 
} 
.testimonialstilabelback { 
    background-image: url(../images/testimonialstilabel2.png); 
    height: 253px; 
    width: 500px; 
} 
.imgeCoverBack { 
    height: 149px; 
    width: 107px; 
    position: absolute; 
    top: 112px; 
    left: 22px; 
} 
.imgeCover { 
    background-image: url(../images/testimonialstilabelimg.png); 
    height: 216px; 
    width: 138px; 
    position: absolute; 
    top: 109px; 
    left: 6px; 
} 

Адрес: asp.net код

<div class="container clearfix"> 
      <div class="testimonialstilabel"> 
       <br> 
       <h2 align="center"> 
        Great things people are saying about us</h2> 
      </div> 
      <asp:DataList ID="DataListT" runat="server" RepeatDirection="Horizontal" RepeatColumns="2" 
      Width="100%"> 
      <ItemTemplate> 
      <div class="testimonialstilabelback"> 
       <asp:Image ID="Image2" runat="server" ImageUrl='<%#Eval("ImageUrlPath")%>' class="imgeCoverBack"/>     
       <div class="imgeCover"> 
       </div> 
       <p style="width: 300px; margin-left: 150px; height: 175px; margin-top: 0px; padding:17px 0px 0px 0px""> 
        <%#Eval("Description")%> 
       </p> 
       <p style="text-align: justify; font-weight: bold; width: 300px; margin-left: 150px; 
        color: #74a6a5; padding: 0px 0px 0px 5px;"> 
        &#8226; <%#Eval("Name")%> 
       </p> 
      </div> 
      </ItemTemplate> 
     </asp:DataList> 
     </div> 

Я знаю, что есть проблема с моим CSS. Пожалуйста, помогите мне, в чем была ошибка, которую я делаю в этом. Кто-нибудь об этом знает?

Answer 1

Привет, вы используете position:absolute, это означает, что элемент ищет своего ближайшего родителя с не абсолютной позицией, объявленной позицией.

Вам нужно сделать относительно прямого родителя для элементов в этом случае

<div class="testimonialstilabelback">

Сделать это изменение в CSS

.testimonialstilabelback { 
    background-image: url(../images/testimonialstilabel2.png); 
    height: 253px; 
    width: 500px; 
    position:relative; 
}