Elements ignoring container edges

How to use it

Take an element that sits inside a container usually, and move it so that it's either overlapping the border of the container, or hanging from the border of the container.

When to use it

If you need an action related to a container to stand out, or an element that will otherwise mess up the layout inside the container, you can try moving it to the edge, either partially (See the left hand example below) or fully (See the right hand example below). Having an element hang from the edge of a container can be a good idea if that container is expandable, and the action expands it. That way it acts like a pull tab. This also applies to the left and right borders, and can be used actions that advance a carousel to the left or right.

What to watch out for

Having an element overlap the border of a container can look odd, especially if everywhere else your elements sit neatly inside their containers.

You might want to add a shadow to elements that are overlapping the edge of the container, so give the impression that they are floating.

If you have a shadow applied to the container, you might also want to apply it to actions hanging from the border, since otherwise they won't look like they're on the same "plane" as the container.

Examples

Example