CSSリボンを1つの表のセルに移動する方法

Question

テーブルの特定のセルを強調表示するリボン/方法を追加しようとしています。私はリボンのコードをいくつか見つけましたが、私のテーブルで動作させることはできません。

thead th p.promo { font-size: 1em; color: #fff; position: absolute; top: 9em; left: -17px; z-index: 1000; width: 100%; margin: 0; padding: .625em 17px .75em; background: #c00; box-shadow: 0 2px 4px rgba(0,0,0,.25); border-bottom: 1px solid #900; } 

thead th p.promo:before { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #900 transparent transparent; bottom: -7px; left: 0; } 
thead th p.promo:after { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 7px 7px 0 0; border-color: #900 transparent transparent transparent; bottom: -7px; right: 0; } 

Answer 1

あなたが持っていた：

現在、私はちょうど私がリボンがここ

に行きたいセル内の正方形を取得することはフィドル https://jsfiddle.net/4xwzuqpn/2/

リボンのコードですあなたのjsFiddleの233という行のあなたのCSSでエラーが発生しました（余分な}文字）。

thead th { 
    position: relative; 
} 

レンダリングしないエ​​ラーがあなたのCSSルールを引き起こしたこと

。エラーが修正されると、position: relativeが動作し、リボンの位置が固定されます。

編集：実際には、233の下にあるものはレンダリングされません。配置だけでなく、リボンの定義全体が表示されます。

これをチェックアウト： https://jsfiddle.net/4xwzuqpn/3/