Сделать фиксированную позицию недоступной для прокрутки

ProgramBox

Сделать фиксированную позицию недоступной для прокрутки

Post author:admin
Запись опубликована:6 февраля, 2023
Post category:Вопросы по программированию

#html #css #angular #frontend #client

#HTML #css #угловой #интерфейс #клиент

Вопрос:

Мне было интересно, есть ли способ сделать div с фиксированной позицией неподвижным, поэтому, если пользователь прокручивает div, он будет неподвижен в начальной позиции. Мне это нужно, потому что у меня есть тост, появляющийся внутри другого div, и мне нужен этот тост на переднем плане, иначе он появится внутри div (с полосой прокрутки и частично видимым).

Это пример изображения для лучшего объяснения:

С абсолютной позицией:

С фиксированной позицией (желаемый эффект):

Это мой код компонента (это дочерний компонент):

         <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute; z-index:999; left:80%; width:300px;opacity:1;cursor:unset !important" *ngIf="!isCollapsed amp;amp; onlyOnePopup == dataItem.Id">
          <div class="toast-header" style="background-color: #00549F;">
            <strong class="mr-auto" style="color:#fff;"></strong>
            <button (click)="onlyOnePopup = null amp;amp; isCollapsed = true" type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
              <span aria-hidden="true" class="close" style="color:white;">amp;times;</span>
            </button>
          </div>
          <div class="toast-body" style="font-family:Font; white-space:pre-line; color:black; cursor:unset">
            TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
          </div>
        </div>

Ответ №1:

Используйте position: fixed , а затем установите точное положение, которое вы хотите. Вот фрагмент, показывающий пример того, как это сделать.

 body {
  height: 2000px;
  background-color: aqua;
}

.fixed-div {
  width: 200px;
  heigth: 200px;
  background-color: white;
  padding: 50px;
  
  position: fixed;
  top: 0px;
  right: 0px;
  margin-right: 20px;
  margin-top: 20px;
}

 <html>
<head></head>
<body>
  <div class="fixed-div">
     Fixed Div
  </div>
</body>
</html>

Ответ №2:

Вместо left: 80% того, чтобы попробовать bottom: 0; right: 0 вместе с position: fixed; , а затем установить right-margin соответствующим образом.

Ответ №3:

главное — установить высоту html как 100vh (проверяемая высота), а ширину — 100vw (проверяемая ширина). это установит для вашей страницы 100% свободного места в окне браузера независимо от размера. затем установите для toast div значение fixed с правым и нижним набором, где вам нравится (0 для нижнего и правого помещает его в правый нижний угол полностью)

вы не можете установить фиксированную точку без ссылки на то, к чему она должна быть прикреплена. таким образом, явно задав размер страницы html, фиксированная позиция может быть установлена на основе этого.

 html {
  height: 100vh;
  width: 100vw;
}

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background-color: rgb(0, 255, 255, 0.8);
  padding: 1rem;
  height: 2.5rem;
  width: 15rem;
}

.display-content {
  max-height: 100vh;
  overflow-y scroll;
}

 <div class="display-content">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur felis neque, et viverra tellus fermentum eget. Quisque nunc tellus, pulvinar id felis sed, sodales iaculis magna. Morbi sodales pellentesque sapien, nec dignissim augue. Integer odio enim, posuere et convallis et, ultricies in odio. Curabitur felis libero, iaculis et elit in, feugiat tempor augue. Duis finibus mattis leo eu facilisis. In faucibus tincidunt dui. Nullam pulvinar est vel mauris rhoncus euismod. Praesent vel pharetra neque, vitae sollicitudin enim. Nunc placerat sagittis malesuada. Suspendisse potenti. In tempus risus eget dapibus semper. Vestibulum vitae elit congue, tempor quam at, ultricies mauris.
</p>

<p>
Suspendisse ut ullamcorper libero. Quisque consectetur gravida nisi, non faucibus turpis iaculis nec. Phasellus vulputate, tellus sed dapibus dapibus, turpis mauris facilisis eros, eu sagittis quam ante eget felis. In nec nisl at lorem tincidunt vulputate vel eu est. Phasellus ipsum velit, placerat quis pulvinar non, auctor at ex. Nam pharetra dolor a semper feugiat. In sed commodo mauris. Aenean in turpis sed orci molestie efficitur quis id orci. Duis laoreet leo a nulla interdum hendrerit. Suspendisse molestie tristique semper. Vestibulum convallis purus et orci mollis sodales. Praesent ut lectus laoreet, suscipit velit nec, pharetra neque.
</p>

<p>
Morbi placerat metus a eros viverra, luctus ultricies eros fringilla. Nunc mollis lorem at lacus lobortis, vitae blandit ex condimentum. Maecenas et ultricies tortor, sit amet ornare risus. Nunc id nisl et ligula commodo vehicula in et risus. Pellentesque molestie et risus quis lacinia. Quisque quis risus laoreet, venenatis enim nec, hendrerit nisl. Nulla facilisi. Pellentesque pretium turpis vestibulum urna auctor sodales. Vivamus mattis sem eu tellus scelerisque tempus. Sed venenatis felis in mollis suscipit. Sed quis felis ac erat facilisis pellentesque eget nec purus. Phasellus libero odio, semper sed auctor at, ultrices non nibh. Proin consectetur metus sed ultrices aliquam. Pellentesque placerat, nibh vitae semper sodales, mauris elit vestibulum mauris, sit amet condimentum odio est tincidunt neque. Quisque metus lacus, ullamcorper non accumsan nec, placerat et lectus.
</p>

    <p>
Vestibulum nec sem ex. Pellentesque volutpat quam eget justo rhoncus congue. Etiam in lorem pellentesque, pulvinar turpis non, dignissim nibh. Etiam eget urna congue, sodales nulla eget, fringilla lorem. Aliquam suscipit dapibus augue eget mollis. Phasellus feugiat sagittis massa, in posuere odio ultrices eu. Aliquam erat volutpat. Morbi eleifend augue vel sagittis pellentesque. Cras auctor interdum purus non fermentum. Aliquam erat volutpat. Integer elit mi, molestie vitae pulvinar vel, elementum et dui. Pellentesque leo risus, elementum eu accumsan nec, pharetra non massa. Phasellus pulvinar mollis aliquam.
    </p>
    
     <p>
     Sed elementum facilisis erat, in molestie tortor varius ut. Vestibulum dapibus dolor quis mi malesuada, id venenatis ante vulputate. Aliquam fermentum viverra ante, sit amet rhoncus turpis laoreet vel. Vestibulum a vestibulum dolor. Mauris ut efficitur nunc. Donec sit amet consectetur orci. Ut at erat non sem mattis dictum. Aliquam vestibulum nulla nunc, nec varius est vestibulum sit amet.
    </p>
    
         <p>
     Aenean imperdiet eros non eleifend molestie. Nullam venenatis nibh non pellentesque imperdiet. Quisque volutpat eros non odio convallis ultricies. Etiam convallis facilisis libero, a commodo tellus condimentum quis. Curabitur congue erat ut tincidunt eleifend. Donec tincidunt ullamcorper consequat. Etiam iaculis elementum fermentum.
    </p>
    
         <p>
     Fusce vehicula libero nisl. Aliquam tempor sem at lacinia facilisis. Donec vestibulum sit amet augue non rhoncus. Nulla sagittis leo elit, a interdum metus dapibus in. Nulla in mattis nunc. Sed sit amet est in tellus vehicula molestie vel tempor nisl. Donec dignissim est lectus, ac pharetra neque bibendum nec.
    </p>
    
         <p>
     Sed porta dui eget turpis scelerisque rutrum. Aliquam eu diam nec nunc ultrices hendrerit. Quisque convallis metus vitae tellus fermentum finibus. Cras id ullamcorper nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed gravida lorem non blandit porta. Aliquam ac dui laoreet, interdum dui vel, pellentesque arcu. Aenean gravida nunc sit amet arcu rhoncus mollis. Nullam sit amet risus at urna dictum pharetra. Nunc maximus condimentum dui, sed hendrerit metus pretium et. Curabitur eu sollicitudin lorem, et luctus magna. Donec tincidunt id purus sed placerat. Proin vel tristique velit. Donec ornare nisi at laoreet luctus. Integer id metus molestie, fermentum massa non, porta diam.
    </p>
    
         <p>
     Quisque at volutpat augue. Maecenas porttitor ornare scelerisque. Ut pretium sapien a placerat dapibus. Fusce vel urna eu sem blandit euismod. In imperdiet eros sit amet quam tempor aliquam. Morbi volutpat tincidunt massa, non convallis dui pharetra nec. Ut velit odio, pellentesque mollis sodales et, eleifend ac libero. Curabitur orci ante, varius ac congue id, rutrum id leo. Pellentesque massa massa, lacinia pretium sapien ut, dignissim congue ipsum. Aliquam commodo leo in nisl pharetra, sed viverra est auctor.
    </p>
</div>



<div class="toast">This is a toast</div>