• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zatrzymac position: fixed w odpowiednim miejscu w html css?

42 Warsaw Coding Academy
0 głosów
486 wizyt
pytanie zadane 2 marca 2019 w HTML i CSS przez jackjanek22 Nowicjusz (120 p.)

Mam stronę oferty pracy i element z logo oraz przycisk "Apply". Dodałem do tego elementu "position: fixed" i kiedy przewijam stronę, mam ten element STICKY i kiedy przewijam do stopki logo i przycisk nakładają się na stopkę. Czy mogę to jakoś zmienić, aby ten element (logo i przycisk) przestał być sticky przy stopce lub innym div poniżej? Chcę używać position: fixed tylko obok zawartości - tekst-karty (która znajduje się po lewej stronie mojego elementu) żeby nie nakładało na nic poniżej

Ten rysunek obrazuje mój problem - chcę żeby nie nakładało się logo i przycisk sticky na divy poniżej ale było przyklejone aż do końca content

 

kod

<div class="row" >
<div class="col-xl-8">
   <div class="card shadow p-3 mb-5 bg-white rounded" style="max-width: 50rem;margin-left: auto; margin-right: auto;">
      <div class="card-body">
         <b>agreement</b>
         <p class="card-text"><%= @job.job_type %></p>
         <b>description</b>
         <p class="card-text"><%=raw @job.description %></p>
         <b>skills</b>
         <p class="card-text"> <%=raw @job.requirements %></p>
         <b>expiration date offer</b>
         <p> <%= @job.data %> <%= @job.hour %></p>
         :
      </div>
   </div>
</div>
<div class="col-xl-4">
   <%  unless @job.avatar_url.nil? %><%= image_tag  @job.avatar_url(:display), style: "margin: 0 auto; display: block;  margin-top: 15px", id: "companylogo" %><% end %>
   <%= link_to @job.url do %>
   <% end %>
   <%=  link_to 'Apply', @job.url, class: "btn btn-lg btn-block pb_btn-pill  btn-shadow-blue .margin_desktop", style: "max-width: 200px ; background:  linear-gradient(to right, #1488cc, #2b32b2); color: white !important;  border: 0px;margin: 0 auto; display: block; margin-top: 15px;  margin-bottom: 15px"%>
</div>
</body>
element {
     margin: 0 auto;
     margin-top: 0px;
     display: block;
     margin-top: 15px;
}
 img#companylogo {
     position: fixed;
}
 img#companylogo {
     position: fixed;
}
 img {
     vertical-align: middle;
     border-style: none;
}

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 222 wizyt
pytanie zadane 14 września 2019 w HTML i CSS przez Jakub Chomicz 1 Użytkownik (840 p.)
0 głosów
1 odpowiedź 219 wizyt
pytanie zadane 7 kwietnia 2019 w HTML i CSS przez Dru Nowicjusz (180 p.)
0 głosów
1 odpowiedź 634 wizyt
pytanie zadane 30 maja 2020 w JavaScript przez kubaa322 Użytkownik (710 p.)

93,383 zapytań

142,383 odpowiedzi

322,539 komentarzy

62,745 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
...