自由に位置指定（position: absolute;）

例えば「クッキーです」をクッキーの文字を中央に配置したい場合、
CSSのposition: absolute;を適用させると好きな位置に表示することができます。

position.html

<body>
  <div>
    <img src="https://4.bp.blogspot.com/-IPgMsDU3gEY/WlGniuLH4rI/AAAAAAABJcE/N6gtYqfooeIsJXz6pU_iBgLbc2uGdQSGACLcBGAs/s250/biscuit3.png">
    <div class="child">クッキーです</div>
  </div>
</body>

position.css

.child {
  position: absolute;
  top: 119px;
  left: 80px;
}

サイトの左上を基準とし、top（上からの距離）とleft（左からの距離）を指定できます。

親要素を基準に位置指定（position: relative;）

例えばサイトの左上からだと指定しづらい場合、
基準としたい親要素にposition: relative;と指定すると、親要素の左上部分が基準位置となります。

position.html

<body>
  <div>
    <img src="https://4.bp.blogspot.com/-IPgMsDU3gEY/WlGniuLH4rI/AAAAAAABJcE/N6gtYqfooeIsJXz6pU_iBgLbc2uGdQSGACLcBGAs/s250/biscuit3.png">
    <div class="child">クッキーです</div>
  </div>


  <div class="parent">
    <img src="https://4.bp.blogspot.com/-IPgMsDU3gEY/WlGniuLH4rI/AAAAAAABJcE/N6gtYqfooeIsJXz6pU_iBgLbc2uGdQSGACLcBGAs/s250/biscuit3.png">
    <div class="child2">クッキーです</div>
  </div>
</body>

position.css

/*1つ目のクッキー*/
.child {
  position: absolute;
  top: 119px;
  left: 80px;
}

/*2つ目のクッキー*/
/*基準としたい親要素*/
.parent {
  position: relative;
}
.child2 {
  position: absolute;
  top: 119px;
  left: 80px;
}

・ 2つ目のクッキーのCSSが適用されていない場合

↓

・ 2つ目のクッキーのCSSが適用された場合