【CSS初心者】文字の縦書き+極小フォント+絶対位置の共存について

前提・実現したいこと

konichiwaと申します。
WEB超初心者なので的を射た質問ができないかもしれませんがお許し下さい。
縦書きの雑誌風WEBサイトを作っていて二進も三進もいかなくなってしまいました。
実現したいスタイルは以下の通りです。「→」の部分は実際に適用している内容です。

背景に画像を配置
背景画像は常に左右の中心揃え、ウィンドウの幅に応じて拡大/縮小（最大1000px）

→ページ全体に 
{ max-width: 1000px;
   margin: 0 auto;
   padding 0; }

→imgタグに
{ max-width: 100%;
   height: auto; }
を適用

画像にマッピングでリンクを配置

→imgタグにhtmlのusemapを使用、jqueryのrwdImageMapsを使用

画像の上にテキスト

→背景画像を親要素にして
{ position: relative }
を適用

→テキストを子要素にして
{ position: absolute;
   top: 20;
   left: 30; }
を適用して位置を指定。

テキストは縦組み

→テキストに
 { -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl; }  を適用

テキストは極小フォント（画像とともに拡大/縮小）

→テキストに
{ font-size: 4vw;
   -webkit-transform:scale(0.1);
   -moz-transform:scale(0.1);
   -ms-transform:scale(0.1);
   -o-transform:scale(0.1);
   transform:scale(0.1); } を適用

発生している問題・エラーメッセージ

テキストの縦組み、transform:scaleでの極小文字、その拡大縮小はうまくいくが、
position: absoluteを使用したtop,leftの位置指定が機能しません。
Google Chromeにてプレビューし、DevToolsで確認すると、top,leftともにエラーのアイコンがついていて、Consoleに表示されるエラーメッセージ

The key "intial-scale" is not recognized and ignored.

が表示されます。
適用しているスタイル同士が競合して、position要素を無効化しているのでしょうか？
詳しい方のご指摘をお待ちしています。
宜しくお願いいたします！

該当のソースコード

すみません、ここの書き方がわかりません、上記の内容でいかがでしょうか？

試したこと

わからないなりに、CSSの記述の順番を変えてみたりしましたが効果はありませんでした。
top,leftに指定している数値がおかしいのかと思って変えてみましたがそうではありませんでした。
top: 0; left: 0;に指定した時だけはテキストが画面の比較的左寄りに表示され、それ以外の数値（マイナス値を含む）の場合はそれよりも右寄りに表示され、数値に依る変化はありません。

補足情報（FW/ツールのバージョンなど）

macOS Sierraでbracketsを使っています。

bracketsのバージョン
リリース 1.11 ビルド 1.11.0-17524
ビルドのタイムスタンプ : Wed Sep 20 2017 03:34:28 GMT-0700

kei344

2018/06/05 23:57

書かれている状況が再現するコード（HTML/CSS）を提示されたほうが回答を得やすいと思います。

m.ts10806

2018/06/06 00:10

タイトルには要件を書いて下さい。 https://teratail.com/help/question-tips#questionTips3-1 タイトルから質問内容が想像できないもの、タイトルと質問内容が食い違っているものはスムーズな回答を得られなくなります。　【CSS初心者】　は要件でしょうか？