stickytoolbarview.html 959 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <div class="ck-reset ck-editor">
  2. <div class="ck-reset_all ck-editor__top">
  3. </div>
  4. <p class="ck-reset">
  5. An editable content mock–up.
  6. An editable content mock–up.
  7. An editable content mock–up.
  8. An editable content mock–up.
  9. An editable content mock–up.
  10. An editable content mock–up.
  11. An editable content mock–up.
  12. An editable content mock–up.
  13. </p>
  14. <div class="ck-reset_all offset-visualizer">
  15. </div>
  16. </div>
  17. <style>
  18. .ck-editor {
  19. height: 200px;
  20. max-width: 400px;
  21. margin: 5em;
  22. background: #ccc;
  23. position: relative;
  24. }
  25. .ck-toolbar {
  26. background: #fff !important;
  27. }
  28. .ck-toolbar:after {
  29. content: "A toolbar mock–up.";
  30. }
  31. .offset-visualizer {
  32. height: 50px;
  33. width: 100%;
  34. position: absolute;
  35. bottom: 0;
  36. background: red;
  37. color: #fff;
  38. }
  39. .offset-visualizer:after {
  40. content: "An offset mock–up. Toolbar should *never* cover the red area.";
  41. }
  42. body {
  43. width: 3000px;
  44. height: 3000px;
  45. }
  46. </style>