كيف تصنع ديف ثابت؟

StackOverflow https://stackoverflow.com/questions/2151048

  •  23-09-2019
  •  | 
  •  

سؤال

أحاول أن أجعل الصندوق ثابتًا في الحدود اليمنى السفلى للصفحة ولا يتحرك مع تمرير الصفحة لأسفل. لكنه لا يعمل بالنسبة لي دونو لماذا. ها هو رمزتي:

<html>
 <head>

 <style type="text/css">

.tooltip {
 width: 200px;
 position: fixed;
 top:auto;
 bottom:0px;
 right:0px;
 left:auto;
}
 </style>
 </head> 
<body>
<div class="tooltip">
   <div class="tooltip_top">1</div>
   <div class="tooltip_con">2</div>
   <div class="tooltip_bot">3</div>
 </div>
</body>
</html>
هل كانت مفيدة؟

المحلول

إنه يعمل بشكل جيد في FF و Chrome ..

لم تدعم الإصدارات القديمة من IE position:fixed بشكل صحيح .. لست متأكدًا من أحدث إصدار ..

تأكد أيضًا من تحديد Doctype ..

نصائح أخرى

يبدو أنه يعمل من أجلي .... أنا أؤمن بـ IE7 وأكبر ستحتاج إلى تحديد Doctype ، والبحث عن "وضع المراوغات" إذا كنت لا تعرف من أين تبدأ ذلك.

لا أعتقد أن IE6 يدعم الموقف: ثابت.

هاه ، يجب أن تعمل. ربما إزالة top: auto?

(لن يعمل في IE 6 رغم ذلك ، لأن IE 6 لا يدعم position: fixed.

يتم كسر HTML/CSS فقط في IE. تغيير من position: fixed; ل position: absolute; ويجب أن تعمل أكثر كما تريد.

يمكنك أيضًا تطبيق عنصر Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

نعم ، شيئان لرعاية

  • اكتب doctype ولكن الانتقالية!
  • إن خاصية CSS الخاصة بـ "الموضع: ثابت" غير مدعومة من قبل IE6 ... لذلك سيكون من الأفضل استخدام "الموضع: مطلق" ... مع كل الخصائص الأخرى التي تحافظ على نفسها.

أن جميع الإجابات لها "رموز كبيرة" لماذا لا تضيف "ثابت" إلى عنصر Div مثل هذا:

div position: fixed;

وهذا

<html>
 <head>
 <style type="text/css">
.header {
 width: 100%;
 height:100px;
 position: fixed;
 top:0px;
 left:0px;
}
 </style>
 </head> 
<body>
<div class="tooltip">
   <div class="tooltip_top">1</div>
   <div class="tooltip_con">2</div>
   <div class="tooltip_bot">3</div>
 </div>
</body>
</html>

أي مشكلة متعلقة بالموضع ثم عرض هذا الرابط لديك حلول سريعة.

http://learnlayout.com/position.html

مُثَبَّت

يتم وضع عنصر ثابت بالنسبة إلى منفذ العرض ، مما يعني أنه يبقى دائمًا في نفس المكان حتى لو تم تمرير الصفحة. كما هو الحال مع النسبية ، يتم استخدام الخصائص العلوية واليمين والأسفل واليسرى.

أنا متأكد من أنك لاحظت أن العنصر الثابت في الركن الأيمن السفلي من الصفحة. أنا أعطيك الإذن بالاهتمام به الآن. إليكم CSS التي تضعها هناك:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

نسبيا

يتصرف النسبي كما هو ثابت ما لم تضيف بعض الخصائص الإضافية.

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

مطلق

المطلق هو أصعب قيمة موقف. يتصرف المطلق مثل الثابتة باستثناء أقرب سلف موضعي بدلاً من ذلك إلى منفذ العرض. إذا لم يكن لعنصر وضع وضعه أي أسلاف في وضع ، فإنه يستخدم جسم المستند ، ولا يزال يتحرك مع تمرير الصفحة. تذكر أن العنصر "الموضعي" هو عرفه هو أي شيء باستثناء ثابت.

اليك مثال بسيط:

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

شيء من هذا القبيل يجب أن تعمل

<style>
    #myheader{
        position: fixed;
        left: 0px;
        top: 95vh;
        height: 5vh;
    }
</style>
<body>
    <div class="header" id = "myheader">
</body>

.tooltip {
 width: 200px;
 position: fixed;
 bottom:0px;
 right:0px;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top