posicionamiento3.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Posicionamiento 3</title>
  5. body {
  6. --paso: 50px; /* Creo la variable */
  7. }
  8. h1 {
  9. position:relative;
  10. top:-25px;
  11. left:100px;
  12. }
  13. p {
  14. position:absolute;
  15. width:300px;
  16. height:200px;
  17. overflow:auto;
  18. padding:2em;
  19. box-sizing:border-box;
  20. }
  21. p:nth-of-type(1) {
  22. color:orange;
  23. background-color:antiquewhite;
  24. left:var(--paso);
  25. top:var(--paso);
  26. }
  27. p:nth-of-type(2) {
  28. color:red;
  29. background-color: coral;
  30. left:calc(var(--paso)*2);
  31. top:calc(var(--paso)*2);
  32. }
  33. p:nth-of-type(3) {
  34. color:green;
  35. background-color: aquamarine;
  36. left:calc(var(--paso)*3);
  37. top:calc(var(--paso)*3);
  38. }
  39. p:nth-of-type(4) {
  40. color:blue;
  41. background-color: cornflowerblue;
  42. left:calc(var(--paso)*4);
  43. top:calc(var(--paso)*4);
  44. }
  45. p:nth-of-type(5) {
  46. color:maroon;
  47. background-color: hotpink;
  48. left:calc(var(--paso)*5);
  49. top:calc(var(--paso)*5);
  50. }
  51. </style>
  52. let z = 1;
  53. function subir(parrafo) {
  54. const todos = document.querySelectorAll('p');
  55. for (const p of todos) {
  56. p.style.opacity = 0.5;
  57. p.style.boxShadow = '';
  58. p.style.filter = 'blur(1px)';
  59. }
  60. parrafo.style.zIndex = z++;
  61. parrafo.style.opacity = 1;
  62. parrafo.style.boxShadow = '4px 4px 8px black';
  63. parrafo.style.filter = '';
  64. }
  65. </script>
  66. </head>
  67. <h1>Posicionamiento 3</h1>
  68. <p onmouseover="subir(this)">
  69. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra placerat augue sollicitudin scelerisque. Nulla a tincidunt arcu. Aenean eleifend eros magna, a rutrum magna sagittis sed. Suspendisse maximus libero nulla, non tincidunt purus volutpat eget. Donec lacinia, enim nec lobortis aliquam, elit risus aliquet mauris, id molestie massa mauris congue odio. Pellentesque vestibulum nisi vitae sem dictum eleifend. In aliquet, ipsum et tempor imperdiet, libero sapien tempor massa, ut rutrum orci diam vel magna. Mauris placerat magna ut tortor elementum dictum. Suspendisse quis diam at diam mollis lobortis. Cras tristique eu arcu quis eleifend. Donec suscipit nisl vel enim posuere, eget rhoncus lacus rhoncus.
  70. Donec a commodo ante. Suspendisse molestie eu mauris sit amet ultricies. Nunc at lacus sit amet nulla venenatis lobortis non nec metus. Fusce consectetur faucibus libero. Nullam ac ligula et nulla vestibulum blandit ac at felis. Quisque enim ipsum, finibus at accumsan lacinia, aliquet a arcu. Etiam commodo ex quam, nec bibendum risus eleifend eget. Nunc a sapien nec ligula maximus volutpat. Donec id pellentesque ex.
  71. </p>
  72. <p onmouseover="subir(this)">
  73. Donec a commodo ante. Suspendisse molestie eu mauris sit amet ultricies. Nunc at lacus sit amet nulla venenatis lobortis non nec metus. Fusce consectetur faucibus libero. Nullam ac ligula et nulla vestibulum blandit ac at felis. Quisque enim ipsum, finibus at accumsan lacinia, aliquet a arcu. Etiam commodo ex quam, nec bibendum risus eleifend eget. Nunc a sapien nec ligula maximus volutpat. Donec id pellentesque ex.
  74. Donec a commodo ante. Suspendisse molestie eu mauris sit amet ultricies. Nunc at lacus sit amet nulla venenatis lobortis non nec metus. Fusce consectetur faucibus libero. Nullam ac ligula et nulla vestibulum blandit ac at felis. Quisque enim ipsum, finibus at accumsan lacinia, aliquet a arcu. Etiam commodo ex quam, nec bibendum risus eleifend eget. Nunc a sapien nec ligula maximus volutpat. Donec id pellentesque ex.
  75. </p>
  76. <p onmouseover="subir(this)">
  77. Suspendisse interdum eros vel ante venenatis consectetur. Sed pulvinar massa eu mauris vehicula, et posuere enim pretium. Pellentesque accumsan ac dolor fermentum ultrices. Nulla ac diam quis lorem varius tincidunt quis id risus. Cras eleifend sodales arcu at aliquet. Vestibulum viverra sem id justo viverra, et congue orci volutpat. Vivamus massa sem, facilisis quis condimentum in, aliquet at metus. In hac habitasse platea dictumst. Maecenas faucibus orci sit amet neque suscipit, in congue libero feugiat. Aenean cursus id quam ac blandit. Morbi tempor ligula quis turpis scelerisque rutrum.
  78. </p>
  79. <p onmouseover="subir(this)">
  80. Fusce vitae molestie lorem. Proin eget bibendum leo. Nunc ac tortor nibh. Sed nec accumsan orci. Donec aliquet nec ipsum at dictum. Nam lobortis sit amet sem in condimentum. Quisque et interdum nisi. Fusce feugiat et lectus at vulputate. Vivamus risus massa, blandit vel finibus pretium, aliquam scelerisque tellus.
  81. </p>
  82. <p onmouseover="subir(this)">
  83. In scelerisque elementum risus aliquet gravida.
  84. </p>
  85. </body>
  86. </html>

Proinf.net