Смешивание плавающего и фиксированного позиционирования - PullRequest
Новая
       28

Смешивание плавающего и фиксированного позиционирования

6 голосов
/ 20 января 2011

здесь стандартно используется float и fixed : 

<html>
<head>
    <style type="text/css">
        #bigDiv
        {
            background-color: red;
            height: 2000px;
            width: 100px;
            float: left;
        }
        #littleDiv
        {
            background-color: green;
            height: 400px;
            width: 200px;
            float: left;            
        }
        #littleDivFixed
        {
            background-color: blue;
            height: 100px;
            width: 200px;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="bigDiv">
    </div>
    <div id="littleDiv">
    </div>
    <div id="littleDivFixed">
    </div>
</body>
</html>

_

  • div "littleDiv"справа от div "bigDiv", но не следует за прокруткой,
  • div "littleDivFixed", напротив, прокручивает, но не очень хорошо расположен относительно div "bigDiv" (он всегда застрялв левой части дисплея).

_

Возможно ли иметь div, который смешивает два поведения:

  • всегда справа от "bigDiv" div (на постоянном расстоянии 10px),
  • всегда на дисплее (на постоянном расстоянии 10pxсверху)?

_

Заранее спасибо за помощь.

Ответы [ 3 ]

4 голосов
/ 20 января 2011

Можете ли вы изменить структуру разметки?

Я получил описанное вами поведение (в Firefox 3.6), сделав два изменения:

Гнездо littleDivFixed внутри littleDiv

Так что вместо 

    <div id="littleDiv">
    </div>
    <div id="littleDivFixed">
    </div>

у вас есть 

    <div id="littleDiv">
        <div id="littleDivFixed">
        </div>
    </div>

Добавить поле к фиксированному div 

margin-left: 10px;

Установка margin вместо left позволяет сохранять «автоматическое» позиционирование влево, при этом все еще делая относительные регулировки.

4 голосов
/ 20 января 2011

Как это? Просто добавьте атрибут left и top в fixed div

http://jsfiddle.net/t5bK9/

Хорошо, это работает в Chrome и IE8 (убедитесь, что это стандартный режим, а не причуды), но по какой-то причине не в jsFiddle. Я не уверен, почему, но он делает то, что вы хотите (я думаю). Если вы хотите быть уверены, что это всегда 10px правильно, в случае изменения размера div, вы можете добавить слушатель onResize в bigDiv для повторного вызова функции positFix. 

<html>
    <head>
        <style>
            #bigDiv {
                border: 1px solid red;
                height: 2000px;
                width: 100px;
                float: left;
            }
            #littleDiv {
                border: 1px solid green;
                height: 400px;
                width: 200px;
                float: left;            
            }
            #littleDivFixed {
                border: 1px solid blue;
                height: 100px;
                width: 200px;
                top: 10px;
                position: fixed;
            }
        </style>
        <script type="text/javascript">
            function $(elem) {
                return document.getElementById(elem);
            }
            function positFix() {
                $('littleDivFixed').style.left = $('bigDiv').offsetWidth + 10;
            }
        </script>
    </head>
    <body>
        <div id="bigDiv">
        </div>
        <div id="littleDiv">
        </div>
        <div id="littleDivFixed">
        </div>
        <script type="text/javascript">
            positFix();
        </script>
    </body>
</html>
1 голос
/ 21 апреля 2017

Вы также можете только добавить: 

#littleDivFixed {
    ...
    top: 10px;
    left: 110px;
}

и установить: 

body {
  width: 310px;
  margin: 0;
}

для правильного размещения.

JSFiddle

...