"Konum: mutlak" ifadesini ana kapsayıcıya değil, belgeye göreli olmaya zorlayın

93

Gövdenin herhangi bir bölümüne bir div eklemeye position: absoluteve bunu tüm belgeye göreli yapmaya çalışıyorum position: relative,.

html css css-position

— Timothy Ruhle
kaynak

Konumu belgeye göre mutlaksa, <body>etiketin alt öğesi olarak aittir , değil mi?

— Jim Garrison

Çözümümü aşağıda gördünüz mü?

— tw16

Evet. Pek çok sayfada kullanılan ve bazen içinde göreceli olarak konumlandırılmış bir öğenin içinde (ki bunu kontrol edemiyorum. Şimdi görüyorum. Bunun imkansız olduğunu görüyorum. Yardımınız için teşekkürler. Benden +1, ve olarak işaretleyeceğim. cevabınızda imkansız olduğunu söylerseniz doğru.

— Timothy Ruhle

BrainJar, burada kalan soruları çözecek tamamen klasik bir CSS konumlandırma girişine sahiptir .

— Alan H.

35

Öğenin divdışını position:relativeve içine yerleştirmeniz gerekecek body.

— tw16
kaynak

1

^^ Bu. Kesinlikle konumlandırılmışsa, yine de nispeten konumlandırılmış öğenin içinde olması için gerçekten bir neden yoktur.

— DOOManiac

7

@DOOManiac - onu göreceli olarak konumlandırılmış öğenin içinde isteyebilirsiniz çünkü bir fareyle üzerine gelme komut dosyasını çalıştırmasını veya üst öğe tarafından tetiklenen bir fareyle üzerine getirilen komut dosyasını çalıştırmamasını istiyorsunuz. Cevabım böyle bir duruma izin veriyor.

— Michael.Lumley

1

@DOOManiac mutlak bir öğeyi göreceli bir öğeye koymanın nedeni, mutlak div'i göreceli öğeye göre konumlandırmaktır. Gövdeye göre konumlandırmak istiyorsanız, bu şekilde ayarlanmasa bile gövde varsayılan olarak görelidir.

— Jason Foglia

20

Konteynerin başka bir konteynerin alt öğesi olması için yüzlerce neden olabilir, ancak konum belgeye göre mutlak olmalıdır. Doğrudan vücuda dahil gibi cevaplar yanlıştır. Doğru cevap konumdur: sabit. Olumsuz oy verildi.

— 2017

3

@walv: position:fixedve position:absoluteaynı davranışa sahip değilsiniz. Sabit, görüntü alanına (belgeye değil) bağlıdır ve potansiyel olarak çakışmalara neden olabilecek şekilde kaydırıldıktan sonra bile öğenin her zaman görünür olmasına neden olur. Html yapısı için geçerli nedenler olabileceğini anlıyorum, ancak soru özellikle html ve css, cevabım doğru. JS'siz onu belgeye göre yapmanın tek yolu, onu position:relativeöğenin dışına taşımaktır .

— tw16

95

Arıyorsun position: fixed.

MDN'den :

Sabit konumlandırma, elemanın içeren bloğunun görüntü alanı olması dışında, mutlak konumlandırmaya benzer. Bu genellikle sayfayı kaydırdıktan sonra bile aynı konumda kalan bir kayan öğe oluşturmak için kullanılır.

— Adrian Holovaty
kaynak

28

bu yanıtla ilgili sorun, kullanıcının mutlak kullanmak istemesidir çünkü sabit öğeler kaydırmada hareket etmez ve mutlak öğeler hareket eder :)

— A Friend

3

Sen mutlak bir efsanesin.

— Benisburgers

6

Sorun , görüntü alanına göre değil belgeye göre nasıl konumlandırılacağıydı

— Paul Humphreys

Bu potansiyel nedeniyle istifleme bağlamlarda bir hata nedeniyle, ie11 sorunlara neden olabilir

— James Westgate

32

Çözümüm, div'i üst öğesinin dışına taşımak için jQuery kullanmaktı:

<script>
    jQuery(document).ready(function(){
        jQuery('#loadingouter').appendTo("body");
    });
</script>

<div id="loadingouter"></div>

— Liorq
kaynak

1

Bu, sorunumu çözdü çünkü ana sayfaları kullandığım için öğemi doğrudan gövde öğesinin içine yerleştiremedim. Teşekkürler!

— Osprey

9

Elemanı eklemek istemiyorsanız body, aşağıdaki çözüm işe yarayacaktır.

Bu soruya div'i vücuda eklemeden işe yarayacak bir çözüm aramak için geldim, çünkü fare hem yeni öğenin hem de onu oluşturan öğenin üzerindeyken çalıştırmak istediğim bir fareyle üzerine gelme betiğim vardı. JQuery kullanmaya istekli olduğunuz ve @Liam William'ın cevabından ilham aldığınız sürece:

var leftOffset = <<VALUE>>;
var topOffset = <<VALUE>>;
$(element).css("left", leftOffset - element.offset().left);
$(element).css("top", topOffset - element.offset().top);

Bu çözüm, öğeyi 0, 0'a taşımak için öğenin geçerli sol ve üst konumunu (gövdeye göre) çıkararak çalışır. Öğeyi gövdeye göre istediğiniz yere yerleştirmek, sol ve üst ofset eklemek kadar basittir. değer.

— Michael.Lumley
kaynak

2

Ayrıca jQueryUI pozisyon fonksiyonundan bahsetmeye değer .

— Michael.Lumley

8

Bu sadece CSS ve HTML ile mümkün değildir.

Javascript / jQuery kullanarak potansiyel olarak öğeleri jQuery.offset()DOM'a alabilir ve jQuery.position()sayfanın neresinde görünmesi gerektiğini hesaplamak için karşılaştırabilirsiniz .

— Misket Limonu
kaynak

IMHO bu cevap en yararlıdır - öğeyi doğrudan gövdenin altına hareket ettirmeden (bu her zaman mümkün değildir) ve sabit konum kullanmadan, aşağı kaydırırken bile öğenin her zaman görünmesini sağlar, yalnızca JS'ye başvurabiliriz. jQuery.offset({ left: 0 })kazanmak için!

— BornToCode