Vị trí CSS: cố định bên trong một phần tử định vị

Tôi có div vị trí có nội dung có thể quá dài nên các thanh cuộn xuất hiện (overflow:auto bộ). Nó hoạt động như một hộp thoại trong một ứng dụng ajax. Tôi muốn sửa một nút đóng trên góc trên bên phải của nó để khi người dùng cuộn div nó sẽ không cuộn đi.Vị trí CSS: cố định bên trong một phần tử định vị

Tôi đã thử nó với position:fixed; right:0; top:0 nhưng nó đã đặt nút ở trên cùng bên phải của trang không nằm trong div (trong firefox).

Có thể thực hiện vị trí nút này bằng cách sử dụng CSS mà không bị hack với offsetWidth/Height bằng js trên mọi sự kiện cuộn không?

ps: chiều cao và chiều rộng của div không phải là giá trị cố định, nó phụ thuộc vào kích thước của nội dung và kích thước của cửa sổ trình duyệt. Người dùng cũng có thể thay đổi kích thước nếu muốn.

Nguồn

2011-02-10 Calmarius

Có thể đáng xem xét sử dụng div với hình nền cố định vị trí cho nút. – cloudrave

@NickM có vẻ như là một ý tưởng hay nhưng bạn sẽ bấm vào nút đó như thế nào? – ithil

@ithil Vì vậy, miễn là chiều cao và chiều rộng của div được đặt cho phù hợp với hình nền, bạn có thể nhấp vào đó. Theo như * xử lý * nhấp chuột, điều đó phụ thuộc vào việc bạn đang sử dụng HTML thuần túy hay JS. Nếu nó chỉ là HTML, bạn có thể bọc div trong thẻ 'a' bằng' href' (hoặc thậm chí chỉ sử dụng thẻ 'a' thay vì' div' và đặt nó là 'display: inline-block'). Nếu đó là JS, bạn có thể nghe nhấp chuột vào 'div'. Tôi có hiểu câu hỏi của bạn một cách chính xác không? – cloudrave

Bạn có thể sử dụng position:fixed; nhưng không được đặt left và top. Sau đó, bạn sẽ đẩy nó sang bên phải bằng cách sử dụng margin-left, để định vị nó ở đúng vị trí bạn muốn.

Kiểm tra một bản demo ở đây: http://jsbin.com/icili5

Nguồn

2011-02-10 20:39:00 Sotiris

bạn là những người được chào đón :) – Sotiris

@Sotiris bạn có thể cung cấp tham chiếu giải thích tại sao điều này nên làm việc? Tại sao các trình duyệt phải định vị một phần tử 'fixed' theo cách này khi' top' và 'left' không được chỉ định? http://stackoverflow.com/questions/8712047/positionfixed-when-left-top-right-bottom-arent-specified-desired-results-in – Flash

Tôi đã viết JS phức tạp nhất cho đến khi tôi tình cờ gặp vấn đề này. Tốt đẹp. – collin

Position:fixed cho biết vị trí tuyệt đối về cửa sổ BROWSER. vì vậy tất nhiên nó đến đó.

Trong khi position:absolute đề cập đến phần tử gốc, vì vậy, nếu bạn đặt nút <div> bên trong < div> của vùng chứa, vị trí sẽ được đặt đúng vị trí của bạn. Một cái gì đó như

CHỈNH SỬA: nhờ @Sotiris, người có một điểm, giải pháp có thể đạt được bằng cách sử dụng vị trí: cố định và lề trái. Như thế này: http://jsfiddle.net/NeK4k/

Nguồn

2011-02-10 20:32:03

Người dùng có thể cuộn nút đóng nếu tôi sử dụng tuyệt đối (đó là lần thử đầu tiên của tôi trước khi cố định.) – Calmarius

Có vẻ như mọi người đọc sai muốn giữ nó trên màn hình. Trong trường hợp đó, bạn phải sử dụng javascript để định vị đúng vị trí liên quan đến div đang được đề cập hoặc sử dụng javascript để cuộn nó đúng cách trong khi sử dụng vị trí: tuyệt đối – Dominic

vẻ, biến đổi css có thể được sử dụng

" 'cải tạo' bất động sản thiết lập một hệ tọa độ cục bộ mới ở các yếu tố",

nhưng ... này không phải là trình duyệt chéo, dường như chỉ Opera hoạt động chính xác

Nguồn

2012-04-03 10:44:40 4esn0k

Nó hoạt động trong Chrome và Firefox ngay bây giờ. Đây là một ví dụ. http://codepen.io/anon/pen/ZOqrYo –

Cảm ơn @PatrickMcElhaney vì ví dụ của bạn, đây là giải pháp tôi đang tìm kiếm :) – c01gat3

Nếu nút đóng của bạn sắp sửa thành văn bản, điều này hoạt động rất tốt đối với tôi:

#close { 
    position: fixed; 
    width: 70%; /* the width of the parent */ 
    text-align: right; 
} 
#close span { 
    cursor: pointer; 
}

Sau đó bạn HTML chỉ có thể là:

<div id="close"><span id="x">X</span></div>

Nguồn

2014-03-26 18:19:14 thatmiddleway

Các giải pháp được lựa chọn hiện tại dường như đã hiểu lầm vấn đề.

Bí quyết là không sử dụng vị trí tuyệt đối hoặc cố định. Thay vào đó, có nút đóng bên ngoài div với vị trí được đặt thành tương đối và một phao bên trái sao cho nó nằm ngay bên phải của div. Tiếp theo, đặt lề trái âm và chỉ mục z dương để nó xuất hiện phía trên div.

Dưới đây là một ví dụ:

#close 
    { 
     position: relative; 
     float: left; 
     margin-top: 50vh; 
     margin-left: -100px; 
     z-index: 2; 
    } 

#dialog 
    { 
     height: 100vh; 
     width: 100vw; 
     position: relative; 
     overflow: scroll; 
     float: left; 
    } 

<body> 
    <div id="dialog"> 
    **** 
    </div> 

    <div id="close"> </div> 
</body>

Nguồn

2015-02-08 11:26:52 Joseph

Câu trả lời thú vị, đưa tôi đến con đường dẫn đến giải pháp tốt hơn để có yếu tố cố định bên trong của một div cuộn. – RebelFist

Tôi biết đây là một bài cũ nhưng tôi có cùng một câu hỏi nhưng không tìm thấy một câu trả lời chính xác đến các yếu tố tương đối cố định cho phụ huynh div.Thanh cuộn trên medium.com là một giải pháp CSS tinh khiết tuyệt vời để thiết lập một cái gì đó position: fixed; liên quan đến phần tử cha thay vì khung nhìn (kinda *). Nó được thực hiện bằng cách thiết lập phụ huynh div-position: relative; và có một wrapper nút với position: absolute; và nút dĩ nhiên là position: fixed; như sau:

<div class="wrapper"> 
    <div class="content"> 
    Your long content here 
    </div> 

    <div class="button-wrapper"> 
    <button class="button">This is your button</button> 
    </div> 
</div> 

<style> 
    .wrapper { 
    position: relative; 
    } 

    .button-wrapper { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 50px; 
    } 

    .button { 
    position: fixed; 
    top: 0; 
    width: 50px; 
    } 
</style>

working example

* Kể từ khi các yếu tố cố định không di chuyển với trang vị trí thẳng đứng sẽ vẫn tương ứng với khung nhìn nhưng vị trí nằm ngang tương ứng với vị trí gốc với giải pháp này.

Nguồn

2016-08-02 19:05:07 Lifehack

Hãy thử vị trí: dính trên div cha của phần tử bạn muốn được sửa.

Thông tin thêm tại đây: http://html5-demos.appspot.com/static/css/sticky.html. Thận trọng: Kiểm tra tính tương thích của phiên bản trình duyệt.

Nguồn

2017-06-30 09:01:18

Vị trí CSS: cố định bên trong một phần tử định vị

Trả lời

Các vấn đề liên quan