Позиционирование абсолютного элемента внутри относительного

.aboutbottom: 0 и width: 100%, почему его не у основания .about и почему у него нет 100% этого?Позиционирование абсолютного элемента внутри относительного

Css СВОЙСТВА здесь

*{ 
    box-sizing: border-box; 
} 
.here { 
    border: 1px solid black; 
    overflow: hidden; 
} 
.hotel-img { 
    position: relative; 
    width: 30%; 
    float: left; 
} 
.hotel-rating { 
    position: absolute; 
    bottom: 0; 
} 
.about { 
    float: left; 
    width: 70%; 
    position: relative; 
} 
.about a { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
}

Html код здесь

<div class="here"> 
     <div class="hotel-img"> 
      <img src="imglink" alt=""> 
      <div class="hotel-rating"> 
       XXXX 
      </div> 
     </div> 
     <div class="about"> 
      <span> 
       <span class="name">Hotel Imperial</span> 
       <span class="address">5th Ave</span> 
      </span> 
      <div class="benefits"> 
       <span>WiFi</span> 
       <span>Pool</span> 
       <span>Dinner</span> 
      </div> 
      <a href="index.php">Buy night from $99 per night</a> 
     </div> 
    </div>

Полный код здесь codepen http://codepen.io/anon/pen/vNrvZm

источник

2015-11-01 Karolina Ticha

Удалить position:relative; из .about и добавить его в .here как так;

.here { 
    border: 1px solid black; 
    position: relative; 
    overflow: hidden; 
} 

.about { 
    float: left; 
    width: 70%; 
    padding-left: 2%; 
}

источник

2015-11-01 11:41:28

Вы должны быть ясно, где вы хотите отобразить <a href="index.php">Buy night from $99 per night</a>, если вы хотите, чтобы отобразить его в нижней части .here ДИВ следовать ответу предоставленного @Sean Murrin., Если вы хотите отобразить только после окончания выгоды div вы должны сделать .about {position:relative}, который вы уже сделали в своем коде. ваш текущий код перекрывается, потому что position: absolute; bottom:0; означает, что он начнется сразу после окончания .benefits div, потому что о div также закончится здесь. если вы предоставите высоту около div, то о div не закончится здесь. вы можете обеспечить заполнение

.about { 
    float: left; 
    width: 70%; 
    position: relative; 
    padding-bottom:30px; //should be greater then the height of `.about a` so it will not overlap. 
}

или

.about { 
     float: left; 
     width: 70%; 
     position: relative; 
     height: something px; //define height of about div 
    }

источник

2015-11-01 12:29:20

У вас нет установленных высот на любых предков .about (я подозреваю, что это то, что вы на самом деле имел в виду, якорь, что это ребенок .about который .about a).

Поэтому я установил прочную, но отзывчивую высоту до <body>. height: 100vh
Добавлено 100vw к <body> ширины (не обязательно, для задачи под рукой).
Added height: 100% до .here и .about. Теперь каждый элемент, содержащий .about a, имеет высоту окна просмотра.

Btw, я заметил, что .about составляет 70% в ширину и изображение 30%, что я предполагаю, что вы хотели. К сожалению, .about a выглядит странно, поскольку он не охватывает всю ширину окна просмотра и не центрируется внутри страницы. Я сделал 2 демо.

Я изменил разметку на втором демо.

<a> был перемещен в .here, затем завернут в <footer>
Давали <footer> все свойства <a> «с и position: fixed
Я также установить display: inline-table для заголовка, адрес и изображения поэтому они будут хорошо играть.

Ниже приведены ссылки на 2 демонстрации ранее упомянутых.

Этот DEMO это исправление вы просили.
Этот DEMO как в предыдущей демонстрации и .about a исправленной.

источник

2015-11-01 14:56:26 zer00ne

Позиционирование абсолютного элемента внутри относительного

ответ

Смежные вопросы