Стек настраиваемых окон (divs) с использованием CSS

Я делаю одностраничное приложение, в котором вы можете открыть несколько настраиваемых окон на странице (не вкладки/окна браузера, а окна, созданные с помощью DOM). Я хочу, чтобы окна стекались друг над другом с определенным XY-смещением. Я пробовал добавить transform: translate(5%, 5%) в divs после первого div, но он просто не работает.Стек настраиваемых окон (divs) с использованием CSS

Я хочу, чтобы они складывают так:

Но сейчас, they're просто укладка друг на друга.

HTML:

<main> 
    <div class=window><div class=app></div></div> 
    <div class=window><div class=app></div></div> 
    <div class=window><div class=app></div></div> 
</main>

CSS:

main { 
    transition: margin-left .5s; 
    padding: 20px; 
    position: fixed; 
    margin-left: 100px; 
    width: 100%; 
    height: 100%; 
    top: 0; 
} 

.window { 
    z-index: 1; 
    left: 0; 
    top: 0; 
    width: 250px; 
    height: 400px; 
}

Любые идеи?

источник

2017-01-02 Jesper

Вы должны создать [Минимальный, полный и проверяемый пример] (http://stackoverflow.com/help/mcve), чтобы мы могли вам помочь. – Ricky

можете ли вы отслеживать количество открытых модалов? если да, то вы можете продолжать увеличивать счетчик, а затем вы можете применять css, например translate ((counter + 5)%, (counter + 5)%) –

, пожалуйста, дайте некоторую базовую информацию о html/css вашего родительского элемента и дочернего div's , его важно знать, например, положение абсолютное ...свойства, которые вы использовали для них, чтобы понять вашу проблему. –

Попробуйте добавить position: absolute ко всем разрывам и использовать left: <num>px и top: <num>px, чтобы разместить их. Убедитесь, что содержащий элемент равен position: relative, в противном случае разделители будут абсолютно расположены относительно «окна просмотра».

См. this article для получения дополнительной информации об абсолютном позиционировании.

источник

2017-01-02 07:34:01

transform: translate(...) относится к самому элементу, а не к родительскому объекту, поэтому, возможно, в этом случае он не работает для вас. Я бы использовал такой же подход, как тот, о котором говорил Джейсон Кемра. Проверьте это еще один ответ, может быть, это поможет вам: How to use transform:translateX to move a child element horizontally 100% across the parent

источник

2017-01-02 07:38:29 amedina

Хорошо, это работает с некоторыми оговорками: http://codepen.io/anon/pen/dNbqgE

HTML:

<div class="card">1</div> 
<div class="card">2</div> 
<div class="card">3</div> 
<div class="card">4</div> 
<div class="card">5</div>

CSS:

.card { 
    width: 100px; 
    height: 200px; 
    outline: 1px solid #cc0000; 
    position: absolute; 
    background: #ddd; 
} 

.card:nth-of-type(n + 1) { 
    transform: translate(5%, 5%); 
} 

.card:nth-of-type(n + 2) { 
    transform: translate(10%, 10%); 
} 

.card:nth-of-type(n + 3) { 
    transform: translate(15%, 15%); 
} 

.card:nth-of-type(n + 4) { 
    transform: translate(20%, 20%); 
} 

.card:nth-of-type(n + 5) { 
    transform: translate(25%, 25%); 
}

Оговоркой, что вам необходимо определить новое правило n-го типа для каждого уровня вашей карты. Если вы используете меньше, sass или другой инструмент сборки css, вы можете легко настроить макрос для генерации любого числа из них.

источник

2017-01-02 07:56:18 Geuis

Ну, вот что! Хотя, мне нужно будет найти способ определения правила nth-of-type. Все приложение написано в CSS, поэтому может быть поздно, чтобы изменить все это на sass или less (если вы не можете импортировать sass в css ???). Любая идея, как сделать правило для каждого окна? – Jesper

Мне нравится ваш стиль. Я предпочитаю писать все в стандартном css тоже. Инструменты сборки полезны, но я все же предпочитаю писать все вручную. Просто подсказка, но термин «окно» запутан. Обычно «окно» относится к браузеру, а не к компонентам DOM. Sass/less и т. Д. - все это просто встроенные инструменты, созданные поверх css, поэтому вы можете просто сбрасывать весь проект css без изменений. Это не требуется. Если вы знаете среднее значение «окон», которое вы будете использовать, вы можете просто скопировать/вставить и создать дополнительные функции и изменить n + (n) и проценты в переводе. – Geuis

'.card: nth-of-type (n + 1)' должен быть '.card: nth-of-type (1)' в этом коде. – connexo

в положение окна div, мы должны установить положение x-y относительно известной ссылки. если все win div находятся в одном и том же родителе, для них используется другое смещение: например: transform: translate(5%, 5%); для первого div, transform: translate(10%, 10%); для второго div и т. д.

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

<html> 
<head> 
<style type="text/css"> 
#main { 
    transition: margin-left .5s; 
    padding: 20px; 
    position: fixed; 
    margin-left: 100px; 
    width: 800px; 
    height: 500px; 
    top: 0; 
} 

.window { 
    position:absolute; 
    z-index: 1; 
    left: 0; 
    top: 0; 
    width: 250px; 
    height: 400px; 
    border:1px solid navy; 

    transform: translate(5%, 5%); /* this is relative to current position */ 
} 
</style> 
</head> 

<body> 


<div id=main> 
    <div class=window><div class=app>w1</div> 
     <div class=window><div class=app>w2</div> 
      <div class=window><div class=app>w3</div> 
      </div> 
     </div> 
    </div> 
</div> 


</body> 
</html>

источник

2017-01-02 10:16:39

Стек настраиваемых окон (divs) с использованием CSS

ответ

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