Мне нужно складывать эти два div друг на друга, сохраняя позиции содержания

Мне нужно складывать эти два div друг на друга, но у меня проблемы с поиском способа сделать это возможным. Мне нужно держать текст внутри в тех же позициях, но нужно иметь возможность, чтобы divs сидели поверх одного и другого, не устанавливая для них абсолютные позиции.Мне нужно складывать эти два div друг на друга, сохраняя позиции содержания

Вот что у меня есть ...

<body> 


<div style="position:relative;"> 
    <div style="position:absolute"> 
    <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p> 
    <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p> 
    </div> 
</div> 


<div style="position:relative;"> 
    <div style="position:absolute"> 
    <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p> 
    <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p> 
    </div> 
</div> 

</body>

источник

2014-01-24 user3233834

Вам не хватает нескольких закрывающих кронштейнов. – ElliotSchmelliot

Вы должны поместить содержание обоих ваших дивы внутри внешнего DIV, который имеет «позицию: относительный», и поставить абсолютное позиционирование на ваших внутренних дивы, и добавьте z-индекс к каждому из них. Затем больший z-индекс помещается поверх меньшего.

<body> 
    <div style="position:relative;"> 
     <div style="position:absolute;z-index:0;"> 
     <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p> 
     <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p> 
     </div> 

     <div style="position:absolute;z-index:1;"> 
     <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p> 
     <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p> 
     </div> 
    </div> 
</body>

источник

2014-01-24 23:27:21 Peter

Прохладный, поэтому ... чтобы уточнить, вы используете 'position: relative;' для сохранения на месте или в поле 'position: absolute;'? В основном 'position: relative;' становится элементом предка абсолютных позиционированных элементов, согласно [w3schools] (http://www.w3schools.com/cssref/pr_class_position.asp), который гласит: '' absolute: этот элемент позиционируется относительно его первого позиционированного (не статического) элемента предка ". Правильно ли это? –

У вас есть несколько вариантов:

Используйте абсолютные postions на ваших дивы. http://jsfiddle.net/sUyS3/1/
Вы можете использовать отрицательные поля на своем втором div.

<div style="margin-top: -25px;">

источник

2014-01-24 23:42:49

Возможно, этот простой пример поможет вам:

Link to fiddle

<body> 
    <div class="one"> 
     Content one 
    </div> 
    <div class="two"> 
     Content two 
    </div> 
</body>

CSS:

.one{ 
    color:red; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:2; 
} 
.two{ 
    color:blue; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:1; 
}

Позиционируя бота h divs абсолютно, мы можем использовать левые и верхние свойства, установить их в одинаковые левые и верхние позиции (это может быть в пикселях, процентах и т. д.), а затем определить, какой из них следует разместить поверх другого, изменяя z-индекс. Высший z-index пронумерованный div будет на вершине, так что .one div будет сверху, и вы увидите больше красного, чем синий. Поменяйте значения вокруг так, чтобы .one имел z-index: 1 и .two имеет z-index: 2, и вы увидите больше синего (так как это цвет шрифта).

Здесь вы можете разместить остальную часть своего контента в divs в моем примере.

источник

2014-01-25 00:29:30 Hiigaran

Мне нужно складывать эти два div друг на друга, сохраняя позиции содержания

ответ

Смежные вопросы