A Foundation es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
En este artículo, aprenderemos sobre la utilidad básica de creación de prototipos de CSS Posicionamiento. Se utiliza para cambiar el valor de posición de un elemento.
Clases de posicionamiento de la utilidad de creación de prototipos de Foundation CSS:
- posición relativa: un elemento con «posición: relativa» se coloca relativamente con los otros elementos que se encuentran encima de él. Si configuramos su parte superior, derecha, inferior o izquierda, otros elementos no llenarán el espacio dejado por este elemento.
- posición-absoluta: Un elemento con “posición: absoluta” se posicionará con respecto a su padre. El posicionamiento de este elemento no depende de sus hermanos o de los elementos que están al mismo nivel.
- posición fija: cualquier elemento HTML con la propiedad «posición: fija» se colocará en relación con la ventana gráfica. Un elemento con posicionamiento fijo le permite permanecer en la misma posición aunque nos desplacemos por la página. Podemos establecer la posición del elemento usando arriba, derecha, abajo, izquierda.
- position-fixed-top: Esta clase permite establecer la posición en fijo. El valor superior, derecho e izquierdo se convierte en 0, lo que significa que div se encuentra en la parte superior.
- position-fixed-bottom: Esta clase permite establecer la posición en fijo. Aquí, el valor inferior izquierdo y derecho se convierte en 0, lo que significa que div se encuentra en la parte inferior.
- position-static: los elementos HTML se colocan de forma estática de forma predeterminada. Los elementos posicionados estáticos no se ven afectados por las propiedades superior, inferior, izquierda y derecha.
Posición habilitante:
@include foundation-prototype-position;
Sintaxis:
<div class="positioning-class"> Content </div>
Ejemplo 1: En este ejemplo, aprenderemos sobre las clases fixed-top y fixed-bottom .
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"https://get.foundation/sites/docs/assets/css/docs.css">
<style>
div {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="position-fixed-top">
<h1 style="color:green">GeeksforGeeks</h1>
<h3 style="color:red"> Position:Fixed-Top</h3>
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/Java.png"
width="200" height="200">
</div>
<div class="position-fixed-bottom">
<h1 style="color:green">GeeksforGeeks</h1>
<h3 style="color:red"> Position:Fixed-Bottom</h3>
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/Java.png"
width="200" height="200">
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, aprenderemos sobre fijo y estático. Veremos, incluso después de desplazarse por la página web, el contenido del div fijo permanece fijo.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"https://get.foundation/sites/docs/assets/css/docs.css">
<style>
div {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="position-fixed" style=
"background-color:yellow;top:50px;left:50%">
<h1 style="color:green">GeeksforGeeks</h1>
<h3 style="color:red"> Position:Fixed</h3>
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/Java.png"
width="200" height="200">
</div>
<div class="position-static">
<h1 style="color:green">GeeksforGeeks</h1>
<h3 style="color:red"> Position:Static</h3>
<p>Here we will write some text and images .</p>
<h2>Java</h2>
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/Java.png"
width="200" height="200">
<h2>C++</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/titleShadow-1024x341.png"
width="200" height="200">
</div>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/prototyping-utilities.html#positioning
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA