Фиксация Div с его матерью

Question

Я использую этот CSS для отображения фиксированного блока в левой части моей веб-страницы. Это красная коробка со словами SPECIAL EVENT в белом цвете, предоставленная изображением.

.special_event{ 
    display:block; 
    position: fixed; 
    width: 52px; 
    height: 29px; 
    background:url(../images/special_icon.png); 
    left:10.5%; 
} 

Но когда разрешение экрана больше, чем 1200 пикселей, ДИВ отдаляется от основного содержания.

Я хотел бы, чтобы special_event ДИВ оставаться в непосредственной близости к основному содержанию независимо от разрешения экрана, как показано на первом изображении. Что не так, и как я могу это исправить?

Answer 1

Вы ищете что-то вроде этого:

position fixed is relative to any position that is not static, thus content & fixed element is always in center and relative to its parent

HTML

<div id="content_wrapper" class="border"> 
    <div id="special_event" class="border"></div> 
    <div id="main_content" class="border"> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </div> 
</div> 

CSS

.border { 
border:1px solid red; 
} 
#content_wrapper { 
    width:800px; 
    margin:0 auto; 
    position:relative; 
    left:50%; 
    margin-left:-400px; 
} 
#special_event { 
    display:block; 
    position: fixed; 
    width: 52px; 
    height: 29px; 
    top:0; 
    margin-left:-52px; 
    background:red; 
} 

Answer 2

Вы можете использовать jquery для выравнивания специального события dom с основным содержимым. С помощью jquery вы можете получить offset.top основного контента, и согласно этому вы можете установить верхнюю часть вашего special_event dom.

  // + you main content top 
      function setTop(){ 

      var offset = $('main_content_selector').offset(); 

      var event_special_top = offset.top + 100; // here you can alter the 100 as per your need, it is used to center the special event dom relative to main content 

      $('.special_event').css('top', event_special_top); 

      } 

      setTop(); 

      // event you can use the setTop with browser resize 

Answer 3

Поместите .special_event элемент внутри вашего основного содержания, let'say #main-content и применить этот CSS:

#main-content { 
    position:relative; 
    .... 
} 

.special_event { 
    position:absolute; 
    width:52px; 
    left: -52px; 
    ... 
} 

JQuery:

$(window).scroll(function() { 
    var fixedTop = 100; // set to whatever you want 
    $('.special-event').css({'top':fixedTop + 'px'}); 
}); 

Answer 4

Вы можете использовать position:fixed с поплавком.

Используйте специальное поле для события и главный контейнер справа. float:right. Затем установите position:fixed для .special_event. Также установите соответствующее значение атрибута right для .special_event, чтобы оно касалось левой границы основного контейнера.