static:

dabblet.css

body
{
	font-size: 24px;
}

.parent
{
	position: relative;
	width: 50%;
}

/*
	static: 
	  default
	relative: 
	  сохраняет "свое место",
	  в % смещается относитльно родителя	  
	  в фиксированных единицах относительно 
	  своего места в потоке
	abosolute
	  исключается из нормального потока
	  формирует блочный элемент
	  позиционируется относительно 
	  ближайшего родителя 
	  с position != static 
	  или body
	fixed
	  == absolute, но позиционируется
	  только относительно viewport
*/
p.position
{
	position: relative;
	top: -50px;
	left: 40px;

	background: yellow;
}

span.position
{
	position: relative;
	top: 20px;
	left: 50%;
	
	background: red;
}

/* 
	hint: поменять высоту окна 
*/
.poa
{
	position: absolute;
	bottom: 0;
	
	width: 50px;
	height: 50px;
	background: #000;
}


.pof
{
	position: fixed;
	top: 10px;
	left: 0;
	
	width: 100%;
	height: 50px;
	
	background: green;
	opacity: 0.4;
}

dabblet.html

<div class="parent">
	<p>
		Размещение стабилизирует продвигаемый стиль менеджмента, не считаясь с затратами.
	</p>
	<p class="position">
		Выставка директивно концентрирует межличностный SWOT-анализ, используя опыт предыдущих кампаний. 
	</p>
	<p>
		<span class="position">Фокусировка</span> категорически изменяет инструмент маркетинга, работая над проектом. Надо сказать, что перераспределение бюджета спорадически порождает побочный PR-эффект, учитывая современные тенденции.
	</p>
	<p>
		Выставка директивно концентрирует межличностный SWOT-анализ, используя опыт предыдущих кампаний. 
	</p>
	<div class="poa"></div>
</div>
<div class="poa"></div>
<div class="pof"></div>

settings.json

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