Как сделать фиксированный div? - PullRequest
Новая
       17

Как сделать фиксированный div?

7 голосов
/ 28 января 2010

Я пытаюсь установить флажок в нижней правой границе страницы и не перемещается при прокрутке страницы вниз. Но это не работает для меня, не знаю почему. Вот мой код: 

<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>

Ответы [ 9 ]

10 голосов
/ 28 января 2010

Отлично работает в FF и Chrome ..

старые версии IE не поддерживали position:fixed правильно .. не уверен насчет последней версии ..

Также убедитесь, что у вас определен тип документа ..

2 голосов
/ 28 января 2010

Кажется, что работает для меня .... Я верю в IE7 и выше, вам нужно будет определить тип документа, поиск "режим причуд", если вы не знаете с чего начать.

Я не думаю, что IE6 поддерживает положение: исправлено.

1 голос
/ 28 января 2010

Да, должно работать. Может быть, удалить top: auto?

(Хотя он не будет работать в IE 6, так как IE 6 не поддерживает position: fixed.

0 голосов
/ 09 марта 2019

Примерно так должно работать 

<style>
    #myheader{
        position: fixed;
        left: 0px;
        top: 95vh;
        height: 5vh;
    }
</style>
<body>
    <div class="header" id = "myheader">
</body>
0 голосов
/ 18 февраля 2015

любой вопрос, связанный с позицией, просмотрите эту ссылку, и вы получите быстрое решение.

http://learnlayout.com/position.html

Fixed

Фиксированный элемент расположен относительно области просмотра, что означает, что он всегда остается на одном месте, даже если страница прокручивается Как и в относительном, используются свойства top, right, bottom и left.

Я уверен, что вы заметили этот фиксированный элемент в правом нижнем углу страницы. Я даю вам разрешение обратить внимание на это сейчас. Вот 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;
}
0 голосов
/ 18 февраля 2015 
<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>
0 голосов
/ 08 января 2013

что все ответы имеют "большие коды" Почему просто не добавить «исправлено» в элемент div Как это: 

div position: fixed;

И это все: D Надеюсь, что это работает для вас

0 голосов
/ 07 октября 2011

Да, две вещи, о которых нужно позаботиться

  • Напишите DOCTYPE, но переходный!
  • CSS свойство "position: fixed" не поддерживается IE6 ... поэтому вам лучше использовать "position: absolute" ... со всеми остальными свойствами, сохраняющими то же самое.
0 голосов
/ 28 января 2010

Ваш 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">
...