у тебя уже указан position: absolute

dabblet.css

body
{
	font: 16px/1.5 Helvetica,sans-serif;
}

.card
{
	/*не стоит зря ограничивать высоту
	тогда при переполнении контентом он вылезет из
	контейнера*/
	width: 700px;
	height: 300px;
	position: absolute;
	top: 10%;
	left: 20%;
	background-color: #F2EFDF;
/* у тебя уже указан position: absolute
зачем тут же его переназначать? */
	position: relative;
}

.card:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:700px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

input[type=radio]
{
	position: absolute;
	left: -9999px;
}



.photo-chooser
{
/* в таких случаях намного лучше позиционировать
абсолютно и в фиксированных единицах, пикселях
понятно почему?
*/
    border-radius: 6px;
    left: 10%;
    position: relative;
    top: 15%;
    width: 100px;
    height: 150px;
    background-color: #474747;
    overflow: hidden;
}

.texts
{
/* тут было бы удобнее делать другую раскладку,
ты поэтому вынужден был задавать высоту для .card
а с другим лэйаутом мог бы не привязываться к размерам*/
    left: 30%;
    position: absolute;
    top: 15%;
}


.photo-chooser label
{
	/*надежнее и логичнее позиционировать контейнер, 
	а не все сразу и потом менять им left*/
    position: absolute;
    bottom: 10px;
     -webkit-animation-play-state: paused;
   
    
}

label img
{
/* label больше из-за картинок
http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image
так как они инлайновые
задавай в таком случае display: block;
*/
    border-radius: 5px;    
}

label[for=photo-1]
{
    left: 5px;
}

label[for=photo-2]
{
    left: 45px;
}

label[for=photo-3]
{
    left: 85px;
}

label[for=photo-4]
{
    left: 125px;
}

label[for=photo-5]
{
    left: 165px;
}

label[for=photo-6]
{
    left: 205px;
}

.photos
{
    position: absolute;
    top: 0;
}

.photos img
{
    border-radius: 6px 6px 0 0;
}

.animation-runner
{
    background-color: #6c6c6c;
    bottom: 0;
    height: 10px;
    position: absolute;
    width: 100%;
    border-radius: 0 0 6px 6px;
}

.animation-runner:hover
{
    background-color: #8D8D8D;
}

@-webkit-keyframes scroller {
	from   { transform: translate(0%); }
	50%   { transform: translate(-470%); }
	to { transform: translate(0%); }
}

.photo-chooser:hover label
{
    /*paused должно быть выставлено анимируемуму
    элементу сразу, а потом уже по hover его можно включать*/
    animation-play-state: paused;
}

div.animation-runner:hover ~ label
{
/* ключевое слово должно идти первым,
оно ищет анимацию infinite, ну и не хватает 
@-webkit-ketframes*/

    	animation: 5s scroller infinite;    	
    	animation-timing-function: linear;


}



.texts h1
{
/* не подключил внешний шрифт*/
	font-size: 1.4em;
	font-weight: normal;
    	margin-top: 0;
}

.texts p
{
	font-size: 0.8em;
}

.texts div
{
    width: 450px;
}

h1:first-letter
{
	color: red;
}

.texts div
{
	display: none;
}


.photos div
{
 /* position: absolute делает все элементы блочными
 а ниже у тебя бессмысленный display: inline-block*/
    position: absolute;
    -webkit-transition: left 0.1s linear;
    -moz-transition: left 0.1s linear;
    -ms-transition: left 0.1s linear;
    -o-transition: left 0.1s linear;
    transition: left 0.1s linear;
    display: inline-block;
}

/* ну и таже история: удобнее позиционировать контейнер
а в нем располгать блоки инлайнами */
div.photo-1
{
    left: 0px;
}

div.photo-2
{
    left: 100px;
}

div.photo-3
{
    left: 200px;
}

div.photo-4
{
    left: 300px;
}

div.photo-5
{
    left: 400px;
}

div.photo-6
{
    left: 500px;
}


input#photo-1:checked ~ div.photo-chooser div.photos div.photo-1,
input#photo-1:checked ~ div.texts div.text-1,
input#photo-2:checked ~ div.photo-chooser div.photos div.photo-2,
input#photo-2:checked ~ div.texts div.text-2,
input#photo-3:checked ~ div.photo-chooser div.photos div.photo-3,
input#photo-3:checked ~ div.texts div.text-3,
input#photo-4:checked ~ div.photo-chooser div.photos div.photo-4,
input#photo-4:checked ~ div.texts div.text-4,
input#photo-5:checked ~ div.photo-chooser div.photos div.photo-5,
input#photo-5:checked ~ div.texts div.text-5,
input#photo-6:checked ~ div.photo-chooser div.photos div.photo-6,
input#photo-6:checked ~ div.texts div.text-6
{
/* такое смещение тебе не позволяет сдеалать полоску которая ездит
у тебя просто активная картинка становится первой
а должен ездить по горизонтали контейнер */
    display: inline-block;
    left: 0px;
}

input#photo-1:checked ~ div.photo-chooser label[for=photo-1],
input#photo-2:checked ~ div.photo-chooser label[for=photo-2],
input#photo-3:checked ~ div.photo-chooser label[for=photo-3],
input#photo-4:checked ~ div.photo-chooser label[for=photo-4],
input#photo-5:checked ~ div.photo-chooser label[for=photo-5],
input#photo-6:checked ~ div.photo-chooser label[for=photo-6]
{
    box-shadow: 0 0 5px rgba(255, 255, 255, 1);
}

div.photo-chooser label
{
    border-radius: 6px;
}

.close
{
    color: #706741;
    font-size: 1.4em;
    position: absolute;
/* неаккрутано спозиционирован
надежнее обе стороны задавать и в пикселях или em*/
    right: 1%;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
}

dabblet.html

    <div class="card">
        <span class="close">×</span>

        <input type="radio" id="photo-1" name="photo" checked>
        <input type="radio" id="photo-2" name="photo">
        <input type="radio" id="photo-3" name="photo">
        <input type="radio" id="photo-4" name="photo">
        <input type="radio" id="photo-5" name="photo">
        <input type="radio" id="photo-6" name="photo">


        <div class="photo-chooser">
            <div class="animation-runner"></div>
            <label for="photo-1">
                <img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/30/square.jpg" alt="tyv@"
                ></label
            ><label for="photo-2">
                <img src="http://center.yandex-team.ru/api/v1/user/nop/photo/30/square.jpg" alt="nop@">
            </label
            ><label for="photo-3">
                <img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/30/square.jpg" alt="shirokoff@">
            </label
            ><label for="photo-4">
                <img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/30/square.jpg" alt="aandrosov@">
            </label
            ><label for="photo-5">
                <img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/30/square.jpg" alt="dfilatov@">
            </label
            ><label for="photo-6">
                <img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/30/square.jpg" alt="panyakor@">
            </label>

            <div class="photos">
                <div class="photo-1">
                    <img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/100/square.jpg" alt="tyv@">
                </div
                ><div class="photo-2">
                    <img src="http://center.yandex-team.ru/api/v1/user/nop/photo/100/square.jpg" alt="nop@">
                </div
                ><div class="photo-3">
                    <img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/100/square.jpg" alt="shirokoff@">
                </div
                ><div class="photo-4">
                    <img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/100/square.jpg" alt="aandrosov@">
                </div
                ><div class="photo-5">
                    <img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/100/square.jpg" alt="dfilatov@">
                </div
                ><div class="photo-6">
                    <img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/100/square.jpg" alt="panyakor@">
                </div>
            </div>
        </div>

        <div class="texts">
            <div class="text-1">
                <h1>Юра Ткаченко</h1>
                <p>
                    Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.
                </p>
                <p>
                    Нажав на кнопку «Написать реферат» вы лично создаете уникальный текст, причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — таким образом, авторские права на реферат принадлежат только вам.
                </p>
            </div>
            <div class="text-2">
                <h1>Сергей Никитин</h1>
                <p>
                    Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
                </p>
            </div>
            <div class="text-3">
                <h1>Иван Широков</h1>
                <p>
                    Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости"
                </p>
            </div>
            <div class="text-4">
                <h1>Алексей Андросов</h1>
                <p>
                    Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
                </p>
            </div>
            <div class="text-5">
                <h1>Дмитрий Филатов</h1>
                <p>
                    Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости"
                </p>
            </div>
            <div class="text-6">
                <h1>Михаил Корепанов</h1>
                <p>
                    Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
                </p>
            </div>
        </div>
    </div>

settings.json

{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}