Расположить дочерний div относительно дедушкиного div

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

Вопрос

У меня проблема с CSS, и я не знаю, действительно ли возможно достичь того, чего я хочу.Вот набросок, иллюстрирующий, чего я хочу достичь:

IMG.jpg

А вот демонстрационная страница:

menu_test.htm

На самом деле дочерний div должен быть расположен относительно дедушкиного div.Но как это можно сделать?Я не могу использовать позицию:исправлено;потому что это не сработало бы, если на странице много другого контента, и пользователю приходится прокручивать страницу вниз.Или есть плагин jQuery, который я могу использовать, чтобы привязать дочерний div к дедушкиному div, а затем они просто держатся вместе, где бы они ни находились на странице?

Спасибо за вашу помощь.

Это было полезно?

Решение

Я думаю, вы можете достичь того, чего хотите, если сможете добавить "прадеда" и расположить ребенка относительно этого.

Вот модификация кода, который вы опубликовали:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 

    <div style="position: relative;">

    <div style="background-color: InfoBackground; border: solid 1px Silver; width: 400px; height: 200px; overflow-y:auto; overflow-x:hidden;"> 

        <div style="background-color: InfoBackground; border: solid 1px Silver; width: 100%; font-size: 11px; padding-left: 210px;" > 

            <div style="background-color: Window; border: solid 1px Silver; width: 200px; height: 199px; position: absolute; top: 1px; left: 1px;" > 

                <p style="font-family: Segoe UI; font-size: 11px;"> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
                </p> 

            </div> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 


        </div> 

    </div> 
    </div>
    <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 
</body> 
</html>

Другие советы

Я бы рассмотрел возможность использования Javascript для создания нового div и перемещения содержимого из дочернего div в ваш новый div.Это взлом, но он работает, если вы не можете изменить структуру HTML на что-то более соответствующее вашей цели.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top