Scalable way to stack in CSS

This is a really interesting question. I think I'm going to look at it semantically rather than practically at the code.

I understand why you don't want to nest them, and at first thought it seems semantically wrong to do so. But I think that's where you're making a mistake.

Think about a physical stack of sticky notes. Are they beside each other, or have they been combined into another distinct "thing"?

Semantically, they are a stack. You could look at it and say this is a clear physical representation of a list, with the ul being the stack and the li being the notes. This makes perfect semantic sense.

You could also say that the physical placement of each note depends on the physical placement of the one before it. You are physically nesting related notes on each other (they just stick out on the right and bottom) but the organization of each consecutive note depends on the one before it. Some might say this is a design thing and not semantic, but why are you stacking the notes if they're not semantically related to begin with? This means that nesting them can also make perfect sense semantically.

To have them side by side in your code but represented as not side by side to the user actually seems semantically meaningless to me. Unless you have a parent container to represent the stack. Which means you're essentially just using other elements to represent ul/li.


EDIT: I did it :). Using transform rotate from the top left on the notes, then reversing the rotation from top left of the parent div. XD

You can change the degrees as long as the parent is negative the same degrees for different offset degrees...

I have eaten my own words saying you can't do it without programming...

I don't know how to overline the rest of the answer, this is the old answer.

The best I could come up with.

Uses pseudo before and after.

Before creates a "bar" the width of the left offset and set height. So if after has more than 200px of height, it falls back to home left.

After is the part that shows the sticky note.

If anyone can figure out how to move this into the element itself, without being in pseudo using the title attribute, then we win! Otherwise that's the closest you can get without creating extra elements. It's about as semantic as sticky notes get too. Very intriguing question!

HTML

<div class="stack">
  <div class="note" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></div>
  <div class="note" title="Sed ac tellus at quam convallis feugiat. Ut vehicula leo non tellus convallis, id faucibus quam varius. Sed feugiat nulla in elit dignissim condimentum."></div>
  <div class="note" title=""></div>
  <div class="note" title="Cras quis volutpat sapien. Mauris volutpat ultrices lacus eu accumsan. Cras tempor sapien maximus quam finibus, ullamcorper imperdiet mauris aliquam."></div>
</div>

CSS

.note:before {
  content: '';
  width: 20px;
  height: 200px;
  float: left;
}
.note:after {
  content: attr(title);
  width: 200px;
  min-height: 200px;
  padding: 10px;
  background: khaki;
  box-shadow: 1px 2px 7px rgba(0,0,0,.3);
  border: khaki 1px outset;
  display: inline-block;
  margin: 10px 0 -190px 0;
}

You can make your elements float and give them a negative margin for the desired effect. The <div class="nofloat">Floating box</div> is to make every annotation skip a line. The visibility is set to hidden so that the element still affects the layout.

<div class="floating-box1">Floating box1</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box2</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box3</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box4</div>

CSS:

.floating-box1 {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    background: #fc0;
    border: 1px solid #f90;
    border-radius: 5px;
    padding: 10px;
}
.floating-box {
    background: #fc0;
    border: 1px solid #f90;
    border-radius: 5px;
    padding: 10px;
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    margin-left:-160px; 
}
.nofloat{
    visibility:hidden;
}

jsfiddle for example : http://jsfiddle.net/1nu02a37/

Tags:

Html

Css

Recent Posts