vị trí cố định div bên trong hộp chứa div

Question

Tôi đang cố tạo div vị trí cố định bên trong vùng chứa tương đối. Tôi đang sử dụng khung css bootstrap. Tôi đang cố gắng tạo một giỏ hàng vị trí cố định. Vì vậy, bất cứ khi nào người dùng cuộn trang nó sẽ hiển thị nội dung giỏ hàng. nhưng bây giờ vấn đề là, nó chạy bên ngoài div container đó.

Điều này phải hoạt động ở chế độ phản hồi.

đây thử của tôi:

<div class="wrapper"> 
    <div class="container"> 
     <div class="element"> 
      fixed 
     </div> 
    </div> 
</div> 

CSS Code:

.wrapper { 
    width:100% 
} 
.container { 
    width:300px; 
    margin:0 auto; 
    height:500px; 
    background:#ccc; 
} 
.element { 
    background:#f2f2f2; 
    position:fixed; 
    width:50px; 
    height:70px; 
    top:50px; 
    right:0px; 
    border:1px solid #d6d6d6; 
} 

See live example here.

Answer 1

Ảnh chụp màn hình:

Đây là cách cư xử position: fixed;:

MDN link

Đừng để không gian cho phần tử. Thay vào đó, đặt nó ở vị trí được chỉ định tương ứng với chế độ xem của màn hình và không di chuyển khi được cuộn. Khi in, hãy đặt nó ở vị trí cố định đó trên mỗi trang.

Do đó, để có được những gì bạn muốn, bạn phải sử dụng một cái gì đó nhiều hơn vị trí cố định:

lẽ này: demo

.wrapper { 
    width:100% 
} 
.container { 
    width:300px; 
    margin:0 auto; 
    height:500px; 
    background:#ccc; 
} 
.element { 
    background:#f2f2f2; 
    position:fixed; 
    width:50px; 
    height:70px; 
    margin-left:250px; 
    border:0px solid #d6d6d6; 
} 

Answer 2

Bạn chỉ có thể thêm

.element { 
    left:368px; 
} 

Fiddle : http://jsfiddle.net/UUgG4/

Answer 3

Nếu bạn muốn hiển thị giỏ hàng ngay cả khi người dùng cuộn cố định thì bạn nên sử dụng position:fixed cho giỏ hàng (nếu .container là giỏ hàng của bạn), vì nó sẽ được hiển thị đối với màn hình/chế độ xem. Mã hiện tại của bạn sẽ chỉ hiển thị element được đặt hoàn toàn bên trong container.Nếu bạn muốn nó được như thế sau đó cung cấp:

.container { 
position:relative; 
} 

.element { 
position:absolute; 
top:50px; 
right:0px; 
} 

Answer 4

Không nó không thể vì tài sản cố định ném tố ra khỏi dòng chảy vì vậy nó không phụ thuộc vào bất cứ điều gì trên các tài liệu và có nó không được chứa trong container của bạn:)

Answer 5

tôi tìm thấy câu trả lời cho rằng:

<div class="container"> 
     <div class="inContainer"> 
      <p> coucou </p> 
     </div> 

     <div> 
      <p> other thing</p> 
     </div> 
</div> 

bạn muốn điều đó class = inContainer là trong class = container ở vị trí cố định nhưng nếu bạn di chuyển với hoa tiêu di chuyển bạn không muốn rằng lớp = i nContainer di chuyển bên ngoài class = chứa

Vì vậy, bạn có thể làm một cái gì đó như thế

.container{ 
    height: 500px; 
    width: 500px; 
    overflow-y:scroll; 
} 

.inContainer { 
    position: absolute; 
} 

Vì vậy class = inContainer sẽ luôn luôn trên đầu của bạn class = container và di chuyển với bạn class = container nếu bạn di chuyển với navigator cuộn =)

(chỉ được thử nghiệm với chrome)

Answer 6

Vâng, bạn có thể làm điều đó, chỉ cần sử dụng margin-top tài sản thay vì top tài sản.

Khi bạn sử dụng position: fixed và chỉ định một vị trí hàng đầu và hoặc trái, bạn sẽ thấy rằng nguyên tố này sẽ được cố định tương đối so với cửa sổ, và không để bất kỳ yếu tố khác của position: relative.

Có một cách xung quanh vấn đề này và không chỉ định các vị trí trên cùng và bên trái nhưng thay vào đó sử dụng lề trái và lề trên vị trí : phần tử cố định.

Nguồn: https://www.gravitywell.co.uk/latest/design/posts/css-tip-fixed-positioning-inside-a-relative-container/

Answer 7

<div style="position: fixed;bottom: 0;width: 100%;"><div class="container" style="position: relative;"><div style="position: absolute;right: 40px;bottom: 40px;background:#6cb975;border-radius: 50%;width: 40px;text-align: center;height: 50px;color: #fff;line-height: 50px;">F</div></div></div> 

Answer 8

Hãy thùng chứa gốc phần tử có position: relative

Thay vì sử dụng top hoặc left sử dụng margin-top và/hoặc margin-left

Nếu bạn chỉ sử dụng top rằng sẽ định vị phần tử dựa trên cửa sổ, nhưng nếu bạn sử dụng margin-top sẽ định vị dựa trên phần tử gốc. Tương tự, hãy xem left hoặc right

<div class="parent"> 
    <div class="child"></div> 
</div> 

.parent { 
    position: relative; 
} 
.child { 
    position: fixed; 
    margin-top: 30px; 
    margin-left: 30px; 
}