chriscoyier

.holder {
  position: relative;
  width: 215px;
  height: 215px;
  margin: 20px;
  z-index: 999;
  cursor: pointer;
}
.h1 {

chriscoyier

The top property in CSS goes hand in hand with positioning. By default, elements are static positioned in which the top property has no effect whatsoever. But when the positioning of an element is relative, absolute, or fixed, the top value plays a big role.

div {
  top: value (px, em, %, pt, etc) || auto || inherit;   /* can be negative */
}

The value for top is any of the valid lengths of CSS.

"The Nudge" (Relative Position)

chriscoyier

/* Click open/close Dropdown in pure CSS */

.tabs {
    position: relative;
    clear: both;
    margin: 50px;
}
.tab {
    float: left;
    position: relative;

chriscoyier

/*
	Triangle with Shadow
*/

.triangle-with-shadow {
   width: 100px;
   height: 100px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);

chriscoyier

{ 
   "continent":"North America",
   "address_format":"{{recipient}}\n{{street}}\n{{city}} {{region_short}} {{postalcode}}\n{{country}}",
   "alpha2":"CA",
   "alpha3":"CAN",
   "country_code":"1",
   "international_prefix":"011",
   "ioc":"CAN",
   "gec":"CA",
   "name":"Canada",

chriscoyier

const App = () => {
  useCodePenEmbed();
  return (
    <PrefillEmbed
      className="codepen"
      penTitle="My sweet demo"
      embedHeight="400"
      themeId="31205"
      editable
      description="Renders a barebones React component"

chriscoyier

/* Oprah Thing
   Saw some movie and there was some Oprah-related commerical before it and it had title things like this during it 
 */

body { background: black; padding: 100px; margin: 0; }

h1 { 
  text-align: center;
  color: white;
  text-transform: uppercase;

chriscoyier

<?php

class CTF_Register_Taxonomies {

    /**
     * Initialize the class
     */
    public function __construct() {
        add_action('init', array( $this, 'tags_support_all') );
        add_action('pre_get_posts', array( $this, 'tags_support_query') );

chriscoyier

/* Click open/close Dropdown in pure CSS */

/* Disclaimer: Not the most semantic
   thing in the universe. */
   
/* Forked from original idea
   http://jsfiddle.net/paullferguson/Sv54G/3/ */

.tabs {
    position: relative;

chriscoyier

/* F.A.Q */

div { position: relative; }
input[type=checkbox] {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;