hogar › Ajustes › Posiciones en CSS. Posicionamiento CSS: absoluto, relativo. Otros valores de posición CSS

Posiciones en CSS. Posicionamiento CSS: absoluto, relativo. Otros valores de posición CSS

Los formularios en HTML son los más complejos, pero por otro lado, quizás los más tema interesante en HTML.

Los formularios web permiten a los visitantes del sitio ingresar cierta información en campos especiales y el desarrollador la recibe en la forma que más le convenga.

Un ejemplo de formulario sería Libro de visitas, cuestionario, prueba en línea. Los formularios se rellenan al registrarse en el sitio web, al realizar pedidos en una tienda online, etc.

Usando HTML, puede crear un marco de formulario: campos de texto, menús, listas, botones, casillas de verificación y botones de opción. Es decir, aquellos elementos con cuya ayuda se ingresa cierta información en el formulario.

Luego, los datos ingresados en el formulario se envían al servidor para su procesamiento. Pero HTML aquí es impotente: un programa o script adjunto ya está trabajando en el procesamiento del formulario. Estos programas suelen estar escritos en lenguaje php o javascript.

Atributos de formulario - etiqueta

Puede haber varios formularios en una página web ( tanto como el desarrollador necesite). Cada uno de ellos comienza con la etiqueta. y termina con una etiqueta de cierre .

El atributo de acción es obligatorio para cualquier formulario: especifica la dirección del archivo que sirve el formulario ( procesa los datos introducidos en el mismo).

El atributo del método determina cómo se envía el contenido del formulario. Hay dos métodos: GET y POST. Ahora no tiene sentido profundizar en estos parámetros, ya que el tema del envío de información mediante los métodos GET y POST se relaciona con los lenguajes de procesamiento de datos ( por ejemplo PHP). Basta saber cuál es exactamente el método de transferencia. publicar datos en la mayoría de los casos se utiliza en formularios.

Atributo de nombre de etiqueta

es opcional. Pero si hay varios formularios en el documento, entonces el manejador debe identificar de alguna manera cada uno de ellos. Por lo tanto, en este caso es necesaria la presencia del atributo de nombre: especifica el nombre único del formulario.

También puede configurar la codificación de los datos de entrada; el atributo Accept-Charset es responsable de esto y también, utilizando el atributo de destino, define la ventana en la que se mostrará el resultado del procesamiento del formulario enviado ( en una ventana nueva o actual).

Pero la etiqueta en sí ¡No tiene sentido, porque el formulario transmite datos que primero deben ingresarse en alguna parte!

Entrada de datos. Campos de formulario - etiqueta

Etiqueta Esta es la etiqueta más común que se encuentra en los formularios. Está diseñado para crear varios elementos, utilizado para ingresar datos en el formulario: estos son campos de texto, botones, casillas de verificación, botones de opción.

El tipo es el atributo principal de la etiqueta. . Establece el tipo de campo ( elemento) formas:

Tipo de valor de atributo="..."	Resultado	Descripción
		Campo de texto de una sola línea para ingresar texto. El atributo de tamaño especifica el ancho del campo en caracteres.
		Campo de texto para ingresar una contraseña. El atributo maxlength establece cantidad máxima caracteres que se pueden introducir
	1 2 3	Cambiar. Puede seleccionar solo una opción de las ofrecidas. El atributo marcado especifica un campo previamente verificado.
	1 2 3	Caja. Hay varias opciones para elegir. Atributo marcado define un campo previamente verificado.
		Botón. El atributo de valor establece la etiqueta en el botón.
		Botón de reinicio. Devuelve los campos del formulario a su formulario original. Restablecer los datos ingresados.
		Botón para enviar los datos introducidos.
		Campo para ingresar el nombre del archivo que se envía.
		Botón de imagen. También se utiliza para enviar datos al servidor. El atributo src especifica la dirección del archivo de imagen.
		Campo oculto: invisible para el usuario.

Menú desplegable - Etiquetas igual que la etiqueta Sirve para recopilar información: crea una lista de la que se pueden seleccionar uno o más elementos. Cada elemento corresponde a un valor, que se envía al servidor para su procesamiento.

Vista la lista que se está creando depende del valor atributo de tamaño: con tamaño = "1" ( valor por defecto) la lista será desplegable.

Un valor diferente para el atributo de tamaño corresponderá al número de elementos de la lista mostrados. Por ejemplo, con size="3" , serán visibles tres elementos. Para ver otros elementos de la lista ( si hay alguno) debería ser usado raya vertical desplazamiento, que se agrega automáticamente.

De forma predeterminada, solo se puede seleccionar un elemento de la lista. Agregar el atributo múltiple a una etiqueta y crea cada elemento de la lista.

Usando el atributo de nombre de la etiqueta

¡las 7 maravillas del mundo!

El punto cardinal es una de las cuatro direcciones principales:
norte Sur oeste Este
¡las 7 maravillas del mundo!
Pirámide de Keops Jardines colgantes de Babilonia Estatua de Zeus en Olimpia Templo de Artemisa en Éfeso Mausoleo de Halicarnaso Coloso de Rodas Faro de Alejandría

Campo de texto multilínea - etiqueta </h3> <p>Etiqueta <textarea>crea un campo de texto de varias líneas. Está permitido realizar saltos de línea que se conservan al transmitir datos al controlador.</p> <p>Atributo de nombre de etiqueta <textarea>es obligatorio: al usarlo, el campo de texto recibe un nombre.</p> <p>El atributo deshabilitado deshabilita el campo: el contenido del campo no se puede cambiar y no es accesible. El atributo de solo lectura indica que el campo es de solo lectura (el usuario no tiene la capacidad de editar el contenido, pero está disponible), se puede seleccionar y, por ejemplo, copiar.</p> <p>Puedes establecer el ancho <a href="https://innovakon.ru/es/internet/znacheniya-shiriny-i-vysoty-dlya-polei-vvoda-tekstovye-polya-naznachenie-i.html">campo de texto</a> en caracteres y altura del campo en líneas usando <a href="https://innovakon.ru/es/internet/iframe-i-frame-chto-eto-takoe-i-kak-luchshe-ispolzovat-freimy-v-html.html">atributos de columnas</a> y filas respectivamente.</p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>Si el contenido del campo excede su tamaño, aparecerá un control deslizante.</span>

Si el contenido del campo excede su tamaño, aparecerá un control deslizante.

Ejemplo de uso de un formulario

Ahora veamos cómo funciona el formulario.

Formulario de pedido de vídeos educativos:

Los formularios HTML son elementos de interfaz complejos. Incluyen diferentes elementos funcionales: campos de entrada Y , listas <select>, consejos, etc. Todo el código del formulario está contenido en el elemento. <form> .</p> <p>La mayor parte de la información del formulario web se transmite utilizando el elemento <input>. Para ingresar una línea de texto, use el elemento <input type="text">, para varias líneas - elemento <textarea>. Elemento <select>crea una lista desplegable.</p> <p>Elemento <label>Crea etiquetas para los campos del formulario. Hay dos formas de agrupar etiquetas y campos. Si el campo está dentro de un elemento <label>, entonces no es necesario especificar el atributo for.</p><p> <label for="lastname">Apellido</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Apellido</label> <label>Apellido <input type="text" name="lastname"></label> </p><p>Los campos del formulario se pueden dividir en bloques lógicos usando el elemento <fieldset>. Cada sección se puede nombrar usando el elemento <legend> .</p><p> <fieldset> <legend>Información del contacto</legend> <label>Nombre <input type="text" required></label> <label>Correo electrónico <input type="email" required></label> </fieldset> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Arroz. 1. Agrupar campos de formulario</p><p>Para que el formulario sea más comprensible para los usuarios, se agrega texto a los campos del formulario para proporcionar un ejemplo de los datos de entrada. Este tipo de texto se denomina texto comodín y se crea utilizando el atributo de marcador de posición.</p> <p>Los campos obligatorios también deben resaltarse. Antes de HTML5, se utilizaba el símbolo de asterisco * junto al nombre del campo. La nueva especificación introduce un atributo obligatorio especial, que le permite marcar un campo obligatorio en el nivel de marcado. Este atributo indica al navegador (suponiendo que admita HTML5) que no envíe datos después de que el usuario haga clic en enviar hasta que se completen los campos especificados.</p><p> <input type="text" required placeholder="Su nombre"> </p><p>Para cambiar la apariencia de un campo de texto cuando recibe el foco, utilice la pseudoclase de foco. Por ejemplo, puede oscurecer el fondo del campo actual o agregar un borde de color para que se destaque del resto:</p><p>Entrada: foco (fondo: #eaeaea;)</p><p>Otro atributo HTML5 útil es el atributo de enfoque automático. Le permite establecer automáticamente el foco en el campo inicial deseado para los elementos. <input>Y <textarea>(solo un elemento de cada formulario).</p> <h2>Ejemplo de creación de un formulario de registro.</h2> <p><b>marcado HTML</b></p><p> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>Registro</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Nombre</label> <input type="text" name="name" required> </div> <div class="radio">Piso <label> <input type="radio" name="sex" value="masculino">masculino <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="femenino">femenino <div class="radio-control female"></div> </label> </div> <div> <label for="email">Correo electrónico</label> <input type="email" name="email" required> </div> <div> <label for="country">Un país</label> <select name="country"> <option>Selecciona tu país de residencia</option> <option value="Rusia">Rusia</option> <option value="Ucrania">Ucrania</option> <option value="Bielorrusia">Bielorrusia</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Enviar</button> </form> </div> </p><p><b>Nota</b><br>action="form.php" - enlace al archivo del controlador de formulario. Cree un archivo en codificación UTF-8, cárguelo en el servidor y reemplace action="form.php" con la ruta al archivo en su servidor.</p> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Arroz. 2. Apariencia del formulario predeterminada <p>Como puede ver en la figura, cada elemento del formulario tiene estilos de navegador predeterminados. Aclaremos los estilos y diseñemos los elementos del formulario.</p><p> Ajuste de formulario (ancho: 550 px; fondo: #ffd500; radio de borde: 20 px;) .form-wrap *(transición: .1s lineal) .profile (ancho: 240 px; flotador: izquierda; alineación de texto: centro; relleno : 30px; ) formulario (fondo: blanco; flotante: izquierda; ancho: calc(100% - 240px); relleno: 30px; radio de borde: 0 20px 20px 0; color: #7b7b7b; ) .form-wrap:after, formulario div:después ( contenido: ""; mostrar: tabla; borrar: ambos; ) formulario div (margen inferior: 15px; posición: relativa;) h1 (tamaño de fuente: 24px; peso de fuente: 400; posición: relativa ; margen superior: 50px; ) h1:después (contenido: "\f138"; tamaño de fuente: 40px; familia de fuentes: FontAwesome; posición: absoluta; arriba: 50px; izquierda: 50%; transformar: traducirX(-50) %); ) /********************* estilo de elementos de formulario ********************* ** / etiqueta, intervalo (pantalla: bloque; tamaño de fuente: 14px; margen inferior: 8px;) entrada, entrada (ancho de borde: 0; contorno: ninguno; margen: 0; ancho: 100%; relleno: 10px 15px; fondo: #e6e6e6; ) entrada:enfoque, entrada:enfoque (box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio etiqueta ( posición: relativa; relleno-izquierda: 50px; cursor: puntero; ancho: 50%; flotante: izquierda; altura de línea: 40px; ) .radio entrada ( posición: absoluta; opacidad: 0; ) .radio -control ( posición: absoluta; arriba: 0; izquierda: 0; altura: 40px; ancho: 40px; fondo: #e6e6e6; radio-borde: 50%; alineación de texto: centro; ) .male:before ( contenido: " \f222"; familia de fuentes: FontAwesome; peso de fuente: negrita; ) .female:before ( contenido: "\f221"; familia de fuentes: FontAwesome; peso de fuente: negrita; ) .etiqueta de radio: entrada flotante ~ . radiocontrol, .radiol input:focus ~ .radio-control ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:checked ~ .radio-control ( color: rojo;) seleccione (ancho: 100%; cursor: puntero; relleno: 10px 15px; contorno: 0; borde: 0; fondo: #e6e6e6; color: #7b7b7b; -apariencia-webkit: ninguno; /* desmarque webkit -browsers */ -moz-appearance: none; /*desmarcar en Mozilla Firefox*/ ) select::-ms-expand ( display: none; /*desmarcar en IE*/ ) .select-arrow ( posición: absoluta ; arriba: 38px; derecha: 15px; ancho: 0; altura: 0; eventos de puntero: ninguno; /*activa la visualización de la lista al hacer clic en la flecha*/ border-style: solid; ancho de borde: 8px 5px 0 5px; color del borde: #7b7b7b transparente transparente transparente; ) botón ( relleno: 10px 0; ancho de borde: 0; pantalla: bloque; ancho: 120px; margen: 25px auto 0; fondo: #60e6c5; color: blanco; tamaño de fuente: 14px; contorno: ninguno; transformación de texto : mayúscula; ) /************************ agregar adaptabilidad al formulario ******************* ** **/ @media (ancho máximo: 600 px) ( .form-wrap (margen: 20 px automático; ancho máximo: 550 px; ancho: 100 %;) .profile, formulario (flotante: ninguno; ancho: 100 % ;) h1 (margen superior: automático; relleno inferior: 50 px;) formulario (radio de borde: 0 0 20 px 20 px;))</p><p><b>Archivo formulario.php</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $encabezados .= "Cco: tu_correo electrónico." "\r\n"; if(!empty($nombre) && !empty($sexo) && !empty($correo electrónico) && ! vacío($país) && filter_var($correo electrónico, FILTER_VALIDATE_EMAIL))( correo($correo electrónico, $asunto, $msg, $encabezados); echo "¡Gracias! Te has registrado correctamente."; ) ?></p><p><b>Nota</b><br>En la variable $subject, especifique el texto que se mostrará como título de la carta; <br>Su_nombre: aquí puede especificar el nombre que se mostrará en el campo "de quién es la carta"; <br>reemplace your_site_url con la dirección del sitio con el formulario de registro; <br>reemplaza tu_correo electrónico con tu dirección <a href="https://innovakon.ru/es/settings/fakty-o-elektronnoi-pochte-istoriya-poyavleniya-i-razvitiya.html">Correo electrónico</a>;<br>$headers .= "Cco: tu_correo electrónico". "\r\n"; envía <a href="https://innovakon.ru/es/internet/korporativnaya-pochta-arhivaciya-vhodyashchih-i-ishodyashchih-soobshchenii-kopiya.html">bcc</a> a su dirección de correo electrónico.</p> <p>Etiqueta <b> <form> </b> <i>(De inglés <b>forma</b>- forma)</i> Instala un formulario en una página web.</p> <p>El formulario está destinado al intercambio de datos entre el usuario y el servidor. El ámbito de aplicación de los formularios no se limita al envío de datos al servidor; mediante scripts del cliente, puede acceder a cualquier elemento del formulario, modificarlo y aplicarlo a su discreción.</p> <p>Un documento puede contener cualquier número de formularios, pero sólo se puede enviar un formulario al servidor a la vez. Por este motivo, los datos del formulario deben ser independientes entre sí.</p> <p>Para enviar el formulario al servidor, utilice <a href="https://innovakon.ru/es/phone/kak-sdelat-neaktivnoi-knopku-na-php-neaktivnaya-knopka-submit.html">Botón de enviar</a>, lo mismo se puede lograr presionando la tecla Enter dentro del formulario. Si falta el botón Enviar en el formulario, <a href="https://innovakon.ru/es/services/kakaya-est-udobnaya-i-kompaktnaya-klava-formy-klavishi-enter.html">Introducir clave</a> imita su uso.</p> <p>Cuando el formulario se envía al servidor, el control de los datos se transfiere al programa especificado por el atributo de acción del elemento. <form>. Previamente, el navegador prepara la información en forma de un par “nombre=valor”, donde se define el nombre. <a href="https://innovakon.ru/es/settings/chto-takoe-product-data-name-kak-ispolzovat-data-atributy-html5.html">atributo de nombre</a> elemento <input>, y el valor lo ingresa el usuario o se establece en el campo de formulario predeterminado. Si se utiliza el método GET para enviar datos, la barra de direcciones puede tener la siguiente forma.</p><p>Http://www.htmlbook.ru/handler.php?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5</p><p>Los parámetros se enumeran después <a href="https://innovakon.ru/es/phone/vozle-printera-gorit-voprositelnyi-znak-hp-lj-m1132-mfp-migaet-oranzhevyi.html">signo de interrogación</a>, especificados después de la dirección del programa del servidor y están separados por un carácter comercial (&). Las letras rusas se convierten a representación hexadecimal (en el formato %HH, donde HH es <a href="https://innovakon.ru/es/phone/redaktor-shestnadcaterichnyh-kodov-luchshie-besplatnye.html">código hexadecimal</a> para un valor de carácter ASCII), el espacio se reemplaza con un signo más (+).</p> <p>Permitido dentro del contenedor. <form>coloque otros elementos, mientras que el formulario en sí no se muestra de ninguna manera en la página web, solo los elementos dentro de él son visibles.</p> <h2>Sintaxis</h2> <form> ... </form> <p>La etiqueta de cierre es obligatoria.</p> <h2>WAI ARIA</h2> <p>Valor de rol predeterminado: <b>forma</b></p> <p>Aceptable <a href="https://innovakon.ru/es/internet/input-chto-takoe-tegi-form-i-input-dlya-sozdaniya-knopok-chekboksov-i-radioknopok.html">valores de rol</a>:</p> <ul><li><b>ninguno</b></li> <li><b>presentación</b></li> <li><b>buscar</b></li> </ul><h2>Atributos</h2> <ul><li>Accept-charset: establece la codificación en la que el servidor puede aceptar y procesar datos.</li> <li>acción: la dirección del programa o documento que procesa los datos del formulario.</li> <li>autocompletar: permite completar automáticamente los campos del formulario.</li> <li>enctype: la forma en que se codifican los datos del formulario.</li> <li>método: método del protocolo HTTP.</li> <li>nombre: el nombre del formulario.</li> <li>novalidate: cancela la validación incorporada de los datos del formulario para verificar la exactitud de la entrada.</li> <li>objetivo: el nombre de la ventana o marco donde el controlador cargará el resultado devuelto.</li> </ul><h3>aceptar juego de caracteres</h3> <p>Establece la codificación en la que el servidor puede aceptar y procesar datos del formulario.</p> <p><b>Sintaxis</b></p><p> <form accept-charset="<кодировка>">...</form> </p><p><b>Valores</b></p> <p>Nombre de codificación, por ejemplo Windows-1251, UTF-8, etc.</p> <p><b>Valor por defecto</b></p> <p>La codificación establecida para la página.</p> <h3>acción</h3> <p>Especifica el controlador al que se accede a los datos del formulario cuando se envían al servidor. Puede actuar como manejador <a href="https://innovakon.ru/es/settings/klient-servernye-messendzhery-dlya-windows-programmy-dlya-obshcheniya-v-lokalnoi.html">programa de servidor</a> o un documento HTML que incluye scripts del lado del servidor (por ejemplo, Parser). Después de que el controlador realiza acciones en los datos del formulario, devuelve un nuevo documento HTML.</p> <p>Si <a href="https://innovakon.ru/es/internet/php-funkciya-pri-izmenenii-polya-formy-php-self-v-atribute-formy.html">atributo de acción</a> ausente, <a href="https://innovakon.ru/es/internet/kak-ubrat-razryv-razdela-na-tekushchei-stranice-razryvy-posle-obychnogo.html">página actual</a> se recarga, devolviendo todos los elementos del formulario a sus valores predeterminados.</p> <p><b>Sintaxis</b></p><p> <form action="<адрес>">...</form> </p><p><b>Valores</b></p> <p>El valor se toma como total o <a href="https://innovakon.ru/es/phone/umalishennyi-links-html-absolyutnyi-i-otnositelnyi-put-chto-takoe.html">camino relativo</a> al archivo del servidor.</p> <p><b>Valor por defecto</b></p> <h3>autocompletar</h3> <p>Controla el autocompletar de los campos del formulario. El valor puede ser anulado por el atributo de autocompletar. <a href="https://innovakon.ru/es/services/izvini-no-ty-vybral-ne-tot-smartfon-dizain-i-raspolozhenie-elementov-kak.html">elementos específicos</a> formas.</p> <p>El autocompletar lo realiza el navegador, que recuerda los valores escritos la primera vez que lo ingresa y luego los sustituye cuando los vuelve a escribir en los campos del formulario. En este caso, la función de autocompletar se puede desactivar en la configuración del navegador y no se puede cambiar en este caso utilizando el atributo de autocompletar.</p> <p>Cuando ingresas las primeras letras del texto, se muestra una lista de valores previamente guardados, entre los cuales puedes seleccionar lo que necesitas.</p> <p><b>Sintaxis</b></p><p> <form autocomplete="on | off">...</form> </p><p><b>Valores</b></p> <ul><li>on: habilita el autocompletado del formulario.</li> <li>off: desactiva el autocompletar. Este valor generalmente se usa para evitar que el navegador guarde datos importantes (contraseñas, números <a href="https://innovakon.ru/es/rates/7878-chto-za-usluga-perevod-deneg-s-bilaina-na-bankovskuyu-kartu-ogranicheniya-i-limity-perevoda-s-bil.html">tarjetas bancarias</a>), así como datos únicos o raramente ingresados (captcha).</li> </ul><p><b>Valor por defecto</b></p> <h3>enctipo</h3> <p>Determina cómo se codifican los datos del formulario cuando se envían al servidor. Por lo general, no es necesario configurar el atributo enctype; los datos se entienden bastante correctamente en el lado del servidor. Sin embargo, si está utilizando un campo de envío de archivos (tipo de entrada = "archivo"), debe definir el atributo enctype como multipart/form-data.</p> <p><b>Sintaxis</b></p><p> <form enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"> ... </form> </p><p><b>Valores</b></p> <ul><li>application/x-www-form-urlencoded: en lugar de espacios, coloque +, los símbolos como las letras rusas están codificados por ellos <a href="https://innovakon.ru/es/rates/kodovaya-tablica-cvetov-cvet-v-stilyah-mozhno-zadavat-raznymi.html">valores hexadecimales</a>(por ejemplo, %D0%90%D0%BD%D1%8F en lugar de Anya).</li> <li>multipart/form-data: los datos no están codificados. Este valor se utiliza al enviar archivos.</li> <li>texto/sin formato: los espacios se reemplazan con un signo +, las letras y otros caracteres no están codificados.</li> </ul><p><b>Valor por defecto</b></p> <p>aplicación/x-www-formulario-urlencoded</p> <h3>método</h3> <p>El atributo del método le informa al servidor sobre el método de solicitud.</p> <p><b>Sintaxis</b></p><p> <form method="get | post">...</form> </p><p><b>Valores</b></p> <p>El valor del atributo del método no distingue entre mayúsculas y minúsculas. Hay dos métodos: obtener y publicar.</p> <ul><li>get: este método es uno de los más comunes y está diseñado para obtener la información requerida y transferir datos a <a href="https://innovakon.ru/es/internet/prepyatstvie-weblinks-php-haki-i-dopolneniya-podmena-adresnoi-stroki-v-microsoft-internet.html">Barra de dirección</a>. Luego, los pares nombre=valor se agregan a la dirección después del signo de interrogación y se separan por un signo comercial (&). La conveniencia de usar el método get es que la dirección con todos los parámetros se puede usar repetidamente, guardándola, por ejemplo, en los marcadores de su navegador, y también puede cambiar los valores de los parámetros directamente en la barra de direcciones.</li> <li>correo - <a href="https://innovakon.ru/es/phone/peredacha-dannyh-iz-php-v-javascript-peredacha-peremennyh-v-php-metody-get-i-post.html">Método de publicación</a> envía datos al servidor en una solicitud del navegador. Esto le permite enviar <a href="https://innovakon.ru/es/services/gradientnyi-fon-css-linear-gradient-lineinyi-gradient-v-fone-dobavlenie.html">gran cantidad</a> datos de los que están disponibles <a href="https://innovakon.ru/es/internet/php-scenarii-obrabotki-html-form-kak-peredat-dannye-v-drugoi-fail.html">obtener método</a>, ya que la publicación no tiene límite de 4Kb. Se utilizan grandes cantidades de datos en foros, <a href="https://innovakon.ru/es/settings/v-kakom-gosudarstve-zarodilas-pochtovaya-sluzhba-istoriya.html">servicios postales</a>, llenando la base de datos, al enviar archivos, etc.</li> </ul><p><b>Valor por defecto</b></p> <h3>nombre</h3> <p>define <a href="https://innovakon.ru/es/settings/chetkie-niki-v-igrah-sozdanie-unikalnyh-imen-teper-k-glavnomu-voprosu.html">nombre único</a> formas. Normalmente, el nombre del formulario se utiliza para acceder a sus elementos a través de scripts.</p> <p><b>Sintaxis</b></p><p> <form name="<имя>">...</form> </p><p><b>Valores</b></p> <p>El nombre es un conjunto de caracteres, incluidos números y letras. JavaScript distingue entre mayúsculas y minúsculas, por lo que cuando acceda a un formulario por nombre a través de scripts, utilice la misma ortografía que el atributo de nombre.</p> <p><b>Valor por defecto</b></p> <h3>novalidar</h3> <p>Cancela la verificación incorporada de los datos ingresados por el usuario en el formulario para verificar su exactitud. Esta verificación la realiza automáticamente el navegador cuando el formulario se envía al servidor y se realiza para los campos <input type="email"> , <input type="url">, así como si existe algún patrón o atributo requerido.</p> <p><b>Sintaxis</b></p><p> <form novalidate>...</form> </p><p><b>Valores</b></p> <p><b>Valor por defecto</b></p> <p>De forma predeterminada, este atributo está deshabilitado.</p> <h3>objetivo</h3> <p>Una vez que el controlador del formulario recibe los datos, devuelve el resultado como un documento HTML. Puede definir el marco en el que se cargará la página web resultante. Para este fin se utiliza <a href="https://innovakon.ru/es/settings/vstavka-giperssylki-v-html-giperssylka-chto-eto-takoe-kak-sdelat.html">atributo objetivo</a>, su valor es el nombre del marco. Si no se establece el objetivo, el resultado devuelto se muestra en la pestaña actual.</p> <p><b>Sintaxis</b></p><p> <form target="<значение>">...</form> </p><p><b>Valores</b></p> <p>El valor es el nombre del marco, <a href="https://innovakon.ru/es/settings/zadat-shirinu-tablicy-html-atributy-i-svoistva-tega-atributy-i.html">especificado por atributo</a> nombre del elemento <iframe>. Si se establece un nombre inexistente, se abrirá una nueva pestaña. Los siguientes nombres se pueden especificar como nombres reservados.</p> <ul><li>_blank: carga la página en <a href="https://innovakon.ru/es/phone/kak-sdelat-chtoby-ssylki-otkryvalis-v-novom-okne-ili-na-novoi.html">nueva pestaña</a> navegador.</li> <li>_self: carga la página en la pestaña actual.</li> <li>_parent: carga la página en el marco principal; si no hay marcos, entonces este valor funciona como _self.</li> <li>_top: cancela todos los marcos y carga la página en la ventana del navegador; si no hay marcos, entonces este valor funciona como _self.</li> </ul><p><b>Valor por defecto</b></p> <h2>Especificaciones</h2> <h2>Ejemplos</h2> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>FORMA</title> </head> <body> <form action="handler.php"> <p><b>¿Cómo crees que significa la abreviatura "OS"?</b></p> <p><input type="radio" name="answer" value="a1">Oficiales <Br> <input type="radio" name="answer" value="a2"><a href="https://innovakon.ru/es/internet/samaya-chasto-ispolzuemaya-operacionnoi-sistemoi-dlya-smartfonov.html">Sistema operativo</a><Br> <input type="radio" name="answer" value="a3">Gran mosca rayada</p> <p><input type="submit"></p> </form> <script type="text/javascript">  </script><br> <br> </body> </html> <i> </i><p>Yo, como el autor del artículo, he logrado mucho en <a href="https://innovakon.ru/es/internet/kak-podklyuchit-css-metody-i-sposoby-podklyuchenii-vnedrenie-css-v-html.html">método CSS</a> empujando, pero falló aún más. Especialmente tiempo. Y si hubiera comprendido inmediatamente los principios de cosas como el posicionamiento y la flotación, entonces <a href="https://innovakon.ru/es/settings/utility-primery-chto-takoe-utility-sushchestvuyut-i-drugie.html">tareas simples</a> De hecho, habría sido sencillo desde el principio. Para ello, a menudo faltan lugares donde se nos expliquen con los dedos los conflictos y anomalías de esos lenguajes de programación que de repente no nos enseñan desde la infancia. Bueno, no nos quedan claros a nivel intuitivo, y qué. Sí, y las ayudas no siempre se leen.</p><p>Si tienes la misma historia, entonces esta es tu lectura de la noche.</p><p>Una de las revelaciones que recibí después de leerlo fue la comprensión de cómo funciona el posicionamiento, en particular la diferencia entre absoluto y relativo (absoluto, relativo). Si lees hasta el final, sabrás exactamente cuándo y cómo funciona cada uno. Todo se presenta aquí mediante ejemplos de listas e imágenes.</p> <h2>Cinco valores de posicionamiento</h2><p>En CSS tenemos una lista de cinco valores de posicionamiento div. <a href="https://innovakon.ru/es/phone/strochnye-i-blochnye-elementy-html-strochnye-elementy-blochnye-elementy-i-blochnye.html">elementos de bloque</a>:</p><ol><li>Estático - estático.</li><li>Relativo - relativo.</li><li>Heredar - heredado.</li><li>Fijo - fijo.</li><li>Absoluto - absoluto.</li> </ol><p>Despejemos un poco el camino quitando <i>heredar</i>, simplemente porque esta propiedad de posicionamiento no necesita análisis adicional. Le dice al elemento que herede las propiedades de su padre y listo. Y en versiones anteriores de Internet Explorer no es compatible en absoluto.</p><p>De forma predeterminada, el posicionamiento está configurado en <i>estático</i>. Cualquier elemento con posicionamiento estático estará donde se espera, dependiendo totalmente de la estructura del HTML.</p><p>Ahora <i>fijado</i>. Este es un gran ancla. Cuando esté equipado con este valor, los elementos permanecerán donde los coloquemos y no se moverán incluso cuando se desplacen. Esto se utiliza a menudo para congelar las barras laterales de navegación, lo cual es terrible para el contenido.</p><p>Entonces, hemos descubierto los tres valores de posicionamiento y podemos considerarlos comprensibles. Simplemente porque su funcionalidad no tiene repeticiones ni variaciones. Quedan cosas interesantes - <i>absoluto</i> Y <i>relativo</i>. Veámoslos individualmente y luego cómo se pueden utilizar juntos. Y también que <a href="https://innovakon.ru/es/settings/kak-sdelat-grud-v-fotoshope-uvelichenie-byusta-nachalo-samye.html">resultados interesantes</a> puede dar.</p> <h2>posicionamiento absoluto</h2><p><a href="https://innovakon.ru/es/phone/vyravnivanie-blokov-po-gorizontali-raspolozhenie-div-po-centru-i-drugie.html">posicionamiento absoluto</a> le permite sacar un objeto del flujo normal del documento y pegarlo en un punto específico de la página. Creemos una lista simple: lista desordenada.</p><ul><li>CUATRO</li> </ul><p>Como sabemos, sus elementos ya están en valor estático, automáticamente. Esto significa que fluyen en el flujo de otros elementos del documento donde se ubican según su estructura html. Ahora veamos qué sucede si asigna uno de los elementos de la lista. <i>absoluto</i> con coordenadas cero.</p><p>>ul li:nésimo-niño(4)( <br>posición:absoluta; <br>izquierda: 0; arriba:0;)</p><img src='https://i2.wp.com/img-fotki.yandex.ru/get/6201/141045115.3/0_68bd1_e4111d59_orig.jpeg' height="155" width="348" loading=lazy loading=lazy><p>Como puede ver, se elimina del flujo general y se coloca en la esquina superior izquierda de la ventana del navegador. Tenga en cuenta que a un elemento absolutamente posicionado no le importa si hay otro en ese lugar o no. Todavía se colocará según las coordenadas.</p><p>Entonces, necesitamos posicionamiento absoluto cuando necesitamos colocar un elemento exactamente en el lugar de la pantalla donde queremos verlo. En consecuencia, su posición se mide mediante sangrías en la parte superior, derecha, inferior e izquierda del borde de la ventana.</p><p>Por ejemplo, coloquemos el mismo cuarto elemento de la lista con una sangría de veinte píxeles a la izquierda y veinte arriba.</p><p>ul li:nésimo-niño(4)( <br>posición:absoluta; <br>izquierda: <b>20 </b> píxeles; arriba: <b>20 </b> píxeles;)</p><img src='https://i0.wp.com/img-fotki.yandex.ru/get/6203/141045115.3/0_68bd2_f7797b13_orig.jpeg' height="157" width="347" loading=lazy loading=lazy><p>Movido un poco hacia abajo y hacia la derecha. Y para confirmar lo dicho de que un elemento con posicionamiento absoluto no influye en la ubicación de otros, le daremos coordenadas que proporcionen una colisión uniforme.</p><p>ul li:nésimo-niño(4)( <br>posición:absoluta; <br>izquierda: <b>60 </b> píxeles; arriba: <b>80 </b> píxeles;)</p><img src='https://i1.wp.com/img-fotki.yandex.ru/get/5508/141045115.3/0_68bd3_61541641_orig.jpeg' height="157" width="349" loading=lazy loading=lazy><p>En conclusión, observemos el comportamiento de los elementos restantes de la lista. Cuando el cuarto se elimina del flujo, el resto se alinea automáticamente en la cola como si no estuviera allí: al tercero le sigue inmediatamente el quinto. Recordemos esto y luego usémoslo a nuestro favor.</p> <h2>Posicionamiento relativo</h2><p><a href="https://innovakon.ru/es/services/3-chto-delaet-svoistvo-z-index-css-sloi-absolyutnoe-i-otnositelnoe-pozicionirovanie-z-index-kogda.html">Posicionamiento relativo</a> funciona de la misma manera que absoluto: dándole al objeto su posición usando las coordenadas superior, derecha, inferior e izquierda. La única diferencia es el punto de partida: la posición del punto de coordenadas cero. Para un posicionamiento absoluto, era el borde de la pantalla del navegador. ¿Y para el familiar?</p><p>Vamos a ver:</p><p>ul li:nésimo-niño(4)( <br>posición: <b>relativo</b>;<br>izquierda: <b>0 </b> píxeles; arriba: <b>0 </b> píxeles;)</p><ul><li>CUATRO</li> </ul><p>¿Cómo es eso? El cuarto punto permaneció en su lugar en el flujo de elementos. Esto se debe a que el punto de partida de sus coordenadas ahora no es el borde de la ventana del navegador, sino el elemento que lo precede en la secuencia. Él también es su padre.</p><p>Ahora, si cambiamos la posición de nuestro sujeto experimental en veinte píxeles, evaluaremos claramente el resultado de tal relación.</p><p>ul li:nésimo-niño(4)( <br>posición: <b>relativo</b>;<br>izquierda: <b>20 </b> píxeles; arriba: <b>20 </b> píxeles;)</p><img src='https://i2.wp.com/img-fotki.yandex.ru/get/6101/141045115.3/0_68bd5_ae2fe20e_orig.jpeg' height="176" width="346" loading=lazy loading=lazy><p>Este extremo puede resultar útil en situaciones reales. Por ejemplo, cuando no queremos tirar un elemento, sino jugar a colocarlo sobre otros. Tenga en cuenta que el posicionamiento relativo no se preocupa por los elementos inferiores de la misma manera que el posicionamiento absoluto. Pero aquí ya no ocupan el lugar de los que se fueron.</p> <h2>Poniendolo todo junto</h2><p>Ahora que hemos aprendido las reglas básicas para el comportamiento de los elementos HTML con posicionamiento absoluto y relativo a través de CSS, creemos un completo y <a href="https://innovakon.ru/es/settings/600-minut-v-mesyac-osnovnye-harakteristiki-tarifa-sohranenie-trafika-i.html">ejemplo claro</a> el trabajo de todo esto.</p> <h3>HTML</h3><p>Comencemos creando un bloque HTML de la clase "foto" e inmediatamente coloquemos en él una imagen de 200x200 píxeles.</p><p><div class="photo"><br> <img src='https://i1.wp.com/domen.ru/photocartochka.jpeg' loading=lazy loading=lazy><br></div></p><p>Ahora es el momento de pasar a editar nuestro CSS.</p> <h3>CSS básico</h3><p>Primero, cambiemos el fondo a oscuro. Luego agregaremos estilos básicos a la foto: le daremos un marco y agregaremos sombras.</p><p>cuerpo (fondo: #69C;)</p><p>Foto ( <br>borde: 5px blanco sólido; <br>altura: 200 píxeles; ancho: 200px; <br>margen: 50px automático;</p><p>/*sombras difíciles pero geniales*/ <br>-webkit- <br><br>sombra de cuadro: 0px 10px 7px rgba (0,0,0,0.4), 0px 20px 10px rgba (0,0,0,0.2); <br>}</p><img src='https://i0.wp.com/img-fotki.yandex.ru/get/6201/141045115.3/0_68bd7_8ee52e1c_orig.jpeg' height="318" width="307" loading=lazy loading=lazy><p>Bueno, en general, aquí está nuestra foto. Nada especial, pero se ha creado el campo de entrenamiento.</p> <h3>Colgar una tira de cinta</h3><p>Digámoslo así: queremos crear la impresión de que las fotos están pegadas a la pared con trozos de cinta adhesiva. Para hacer esto, necesitamos mostrar lo que ya hemos aprendido y agregar un pseudoelemento.</p><p>Primero, para crear nuestra película, utilizamos el pseudoelemento “antes” “:before”. Su configuración CSS le indicará a la cinta que tenga veinte píxeles de alto y cien píxeles de largo. Además, con un fondo blanco, al que se le asigna una opacidad del cincuenta por ciento, es película. Bueno, tenya,¿dónde estaríamos sin ella?</p><p>Foto:antes ( <br>contenido: "escocés"; <br>altura: 20 píxeles; <br>ancho: 100px; <br></p><p><br><br><br>}</p><img src='https://i1.wp.com/img-fotki.yandex.ru/get/6103/141045115.3/0_68bd8_3cc02307_orig.jpeg' height="318" width="308" loading=lazy loading=lazy><p>Sí, aquí la película no se apega a nada más que a sí misma...</p><p>Es obvio que tenemos problemas con el posicionamiento del pseudoelemento. Intentemos corregir la situación utilizando el posicionamiento relativo.</p><p>Foto:antes ( <br>contenido: "escocés"; <br>altura: 20 píxeles; <br>ancho: 100px; <br>fondo: rgba(255,255,255,0.5);</p><p>posición: <b>relativo</b>;<br>arriba: <b>0 </b> píxeles; izquierda: <b>0 </b> píxeles;</p><p>Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); <br>-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); <br>sombra de cuadro: 0px 1px 3px rgba(0,0,0,0.4); <br>}</p><img src='https://i1.wp.com/img-fotki.yandex.ru/get/6103/141045115.3/0_68bd8_3cc02307_orig.jpeg' height="318" width="308" loading=lazy loading=lazy><p>Excelente. Que efecto...</p><p>Como puedes ver, no hemos solucionado el problema. Bueno, como el posicionamiento relativo no funcionó, vayamos a <a href="https://innovakon.ru/es/settings/polzovatelskii-slovar-dlya-android-kak-nastroit-i-ispolzovat.html">direccion opuesta</a> y probemos lo absoluto.</p><p>Foto:antes ( <br>contenido: "escocés"; <br>altura: 20 píxeles; <br>ancho: 100px; <br>fondo: rgba(255,255,255,0.5);</p><p>posición: <b>absoluto</b>;<br>arriba: <b>0 </b> píxeles; izquierda: <b>0 </b> píxeles;</p><p>Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); <br>-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); <br>sombra de cuadro: 0px 1px 3px rgba(0,0,0,0.4); <br>}</p><img src='https://i0.wp.com/img-fotki.yandex.ru/get/5508/141045115.3/0_68bd9_9d9d3c2a_orig.jpeg' height="318" width="308" loading=lazy loading=lazy><p>Pero esto está más cerca del tema.</p><p>Finalmente, la cinta tomó la forma ordenada. Pero por ahora está aburrido en algún rincón. Inmediatamente se sugiere un cambio de coordenadas para moverlo a donde lo necesitamos. Pero esto no es una solución: la cinta se detendrá en un punto determinado y comenzará a moverse junto con el cambio en el tamaño de la pantalla.</p><p>Bueno, probamos tanto el relativo como el absoluto para el posicionamiento. Pero todavía no estamos satisfechos ni con una ni con la otra como solución.</p><p>¿Que sigue? Y, por ejemplo, la historia sobre el posicionamiento absoluto de los elementos no está completa. Verás, la esquina superior izquierda de la pantalla no siempre está <a href="https://innovakon.ru/es/rates/gde-nahoditsya-nulevaya-tochka-nad-urovnem-morya-kronshtadtskii.html">Punto cero</a> Coordenadas para un elemento absolutamente posicionado. En cambio, nuestro pseudoelemento "absoluto" estará orientado por <b>al primer ancestro no estático</b>. EN <a href="https://innovakon.ru/es/internet/kak-vosstanovitsya-v-odnoklassnikah-zabyl-parol-vosstanovlenie.html">en este caso</a>- de la foto.</p><p>¿Qué obtenemos de esto? Mucho: podemos usar el posicionamiento absoluto para la cinta. Pero antes de eso, debemos cambiar algo sobre su padre, sobre la foto. Y como no queremos que la cinta se mueva arbitrariamente a lo largo de la foto dependiendo de la resolución de la pantalla, le aplicaremos un posicionamiento relativo.</p><p>Foto ( <br>borde: 5px blanco sólido; <br>altura: 200 píxeles; <br>ancho: 200px; <br>margen: 50px automático; <br>posición: <b>relativo</b>;</p><p><br>-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2); <br>sombra de cuadro: 0px 10px 7px rgba (0,0,0,0.4), 0px 20px 10px rgba (0,0,0,0.2); <br>}</p><p>Foto:antes ( <br>contenido: "escocés"; <br>altura: 20 píxeles; <br>ancho: 100px; <br>fondo: rgba(255,255,255,0.5); <br>posición: <b>absoluto</b>;<br>arriba: <b>0 </b> píxeles; izquierda: <b>0 </b> píxeles;</p><p>Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); <br>-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); <br>sombra de cuadro: 0px 1px 3px rgba(0,0,0,0.4); <br>}</p><img src='https://i2.wp.com/img-fotki.yandex.ru/get/5508/141045115.3/0_68bda_4e306649_orig.jpeg' height="319" width="306" loading=lazy loading=lazy><p>Entonces, un pseudoelemento con posicionamiento absoluto eligió la esquina superior izquierda del primero de los ancestros no estáticos como punto de referencia para sus coordenadas. Es decir, el ángulo de la foto coincide exactamente con esta descripción. Por lo tanto, la cinta siempre quedará pegada en esta esquina, incluso si cambia el tamaño de la ventana del navegador.</p><p>Ahora que hemos encontrado el punto de partida, podemos mover la cinta a la ubicación que necesitamos ajustando los valores superior e izquierdo. prestar atención a <a href="https://innovakon.ru/es/rates/html-vydelenie-vydelenie-teksta-zhirnym-kursivom-i-cvetom-kak-vydelit.html">significado negativo</a> para el punto superior. Al observar el resultado, entenderás por qué. El valor izquierdo se establece para centrar la cinta horizontalmente. Alguien "calculadora instantánea" mostrará claramente cómo se calcula esto.</p><p>Foto:antes ( <br>contenido: ""; <br>altura: 20 píxeles; <br>ancho: 100px; <br>fondo: rgba(255,255,255,0.5); <br>posición: <b>absoluto</b>;<br>arriba: <b>-15 </b> píxeles; izquierda: <b>50 </b> píxeles;</p><p>Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); <br>-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); <br>sombra de cuadro: 0px 1px 3px rgba(0,0,0,0.4); <br>}</p><p>Como podemos ver desde <a href="https://innovakon.ru/es/settings/kamennye-bukvy-v-fotoshope-i-vot-nasha-finalnaya-kartinka.html">imagen final</a>— combinar el posicionamiento absoluto y relativo nos dio exactamente lo que necesitábamos para lograr el efecto deseado y comprender cómo funcionan estas dos propiedades.</p><p>También echa un vistazo a Tinkerbean. En esencia, este es un generador de código muy útil. <a href="https://innovakon.ru/es/settings/obzor-prilozheniya-imovie-dlya-iphone-i-ipad-imovie-na-razlichnyh-platformah-apple.html">varios efectos</a>.</p> <h2>Conclusión</h2><p>Colocar elementos de bloques puede ser una tarea realmente difícil sin dominar <a href="https://innovakon.ru/es/settings/chto-takoe-reestr-i-kak-s-nim-rabotat-reestr-windows-dlya-nachinayushchih.html">conceptos básicos</a> sobre él. Sin embargo, sólo es necesario tener en cuenta tres cosas para poder aplicar y combinar sus parámetros a tiempo.</p><p>La primera es que el posicionamiento relativo le permite alinearse con un punto de partida específico. La segunda es que también puedes configurar relativo al primer ancestro no estático, y no sólo al borde de la ventana del navegador, como ocurre con el valor <i>"posición: ninguna"</i>. Y finalmente: ni el posicionamiento relativo ni absoluto de un objeto afecta a los objetos estáticos y fijos que lo rodean. Recordemos desde el principio del artículo: los elementos absolutamente posicionados se eliminan del flujo y los relativos toman las posiciones de otras personas.</p> <h2>Notas</h2><ul><li>Los teléfonos móviles y tabletas obsoletos no perciben bien el parámetro de posicionamiento <i>"fijado"</i>. O mejor dicho, no lo perciben. Los menús a los que está asignado se deslizan por la pantalla junto con el contenido como si fueran <i>"estático"</i>. Con la llegada de iOS 5+, todo volvió a la normalidad, pero no antes.</li><li>La forma en que todo lo escrito aquí fue percibido, por ejemplo, por el séptimo <a href="https://innovakon.ru/es/rates/kak-perenesti-vse-polzovatelskie-nastroiki-iz-internet-explorer-kak-eksportirovat-nastroiki-inte.html">explorador de Internet</a>– No quiero ni hablar de eso. Había incluso menos ganas de pensar en cómo hackear CSS. Por lo tanto, para el demonio, hice capturas de pantalla de toda la belleza y las codifiqué en HTML con construcciones como: <p> </p><p><!><br>Y aquí está el código completo para <a href="https://innovakon.ru/es/internet/normalnyi-brauzer-dlya-windows-phone-cortana-vash-personalnyi-cifrovoi.html">navegadores normales</a>.<br><!> </p><p>Entonces, si no eres demasiado vago para publicar tus soluciones usando únicamente CSS, entonces los comentarios están a tu servicio. Salvemos el mundo.</p></li> </ul> <h3>Descripción</h3> <p>Establece cómo se coloca un elemento en relación con la ventana del navegador u otros objetos en la página web.</p> <h3>Sintaxis</h3> <p>posición: absoluta | fijo | relativo | estática | heredar</p> <h3>Valores</h3>absoluto Indica que el elemento está en una posición absoluta, lo que hace que otros elementos aparezcan en la página web como si el elemento no estuviera en una posición absoluta. La posición del elemento está especificada por las propiedades left, top, right y bottom, y la posición también se ve afectada por el valor. <a href="https://innovakon.ru/es/phone/vyravnivanie-elementov-so-svoistvom-position-fixed-pri-pomoshchi-css-funkcii.html">propiedades de posición</a> <a href="https://innovakon.ru/es/phone/kakoi-element-yavlyaetsya-roditelskim-dlya-tega-title-proverka.html">elemento padre</a>. Entonces, si el valor de posición del padre se establece en estático o no hay ningún padre, entonces las coordenadas se cuentan desde el borde de la ventana del navegador. Si el valor de posición del padre es fijo, relativo o absoluto, entonces las coordenadas se cuentan desde el borde del elemento padre. fijo En su acción, este valor es cercano a absoluto, pero a diferencia de él, está vinculado al punto en la pantalla especificado por las propiedades izquierda, superior, derecha e inferior y no cambia su posición al desplazarse por la página web. <a href="https://innovakon.ru/es/internet/flashgot-mass-downloader-dopolneniya-firefox-rasshirenie-flashgot-dlya-brauzera-firefox-osnovnye.html">Navegador Firefox</a> no se muestra en absoluto <a href="https://innovakon.ru/es/phone/prokrutka-bez-polosy-prokrutki-skryt-polosu-prokrutki-no-pri.html">barras de desplazamiento</a>, si la posición del elemento está configurada como fija y no encaja completamente en la ventana del navegador. EN <a href="https://innovakon.ru/es/internet/kakoi-brauzer-luchshe-na-android-vybiraem-samyi-luchshii-brauzer-dlya-android-opera-mini.html">navegador ópera</a> Aunque se muestran barras de desplazamiento, no afectan la posición del elemento de ninguna manera. relativo La posición del elemento se establece en relación con él. <a href="https://innovakon.ru/es/phone/kak-upravlyat-kameroi-s-kvadrokoptera-probuem-kuvyrki-i-obhodim.html">lugar original</a>. Agregar las propiedades left, top, right y bottom cambia la posición del elemento y lo mueve hacia un lado u otro desde su ubicación original. Los elementos estáticos se representan como de costumbre. El uso de las propiedades left , top , right y bottom no produce ningún resultado. heredar Hereda el valor del padre. <p>HTML5 CSS2.1 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>posición</title> <style> .layer1 { position: relative; /* Относительное позиционирование */ background: #f0f0f0; /* Цвет фона */ height: 200px; /* Высота блока */ } .layer2 { position: absolute; /* Абсолютное позиционирование */ bottom: 15px; /* Положение от <a href="https://innovakon.ru/es/phone/funkciya-ne-bespokoit-na-iphone-kak-rabotaet-kak-dozvonitsya-cheloveku-esli.html">нижнего края</a> */ right: 15px; /* Положение от правого края */ line-height: 1px; } </style> </head> <body> <div class="layer1"> <div class="layer2"> <img src='https://i1.wp.com/images/girl.jpg' loading=lazy loading=lazy> </div> </div> <script type="text/javascript">  </script><br> <br> </body> </html> </p><p>Resultado <a href="https://innovakon.ru/es/settings/primer-otlichiya-informacii-ot-dannyh-ponyatie-informacii-informaciya-i-dannye.html">este ejemplo</a> mostrado en la Fig. 1.</p> <p>Arroz. 1. Usando la propiedad de posición</p> <h3>modelo de objetos</h3> <p>document.getElementById("elementID ").estilo.posición</p> <h3>Navegadores</h3> <p>El navegador Internet Explorer 6 no admite el valor fijo. Internet Explorer anterior a la versión 8.0 no admite el valor heredado.</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="single-popular"> <div class="single-popular-tit col-lg-12">Popular en la categoría:</div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Cómo combinar capas en Photoshop en una o combinarlas en un grupo Cómo combinar varias capas en Photoshop"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Cómo fusionar capas en Photoshop en una o combinarlas en un grupo...</div> <a href="https://innovakon.ru/es/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Cómo combinar capas en Photoshop en una o combinarlas en un grupo Cómo combinar varias capas en Photoshop">leer</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Transferir contactos a un nuevo teléfono Android"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Transferir contactos a un nuevo teléfono Android</div> <a href="https://innovakon.ru/es/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Transferir contactos a un nuevo teléfono Android">leer</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/ff504b14456f4702a94368a161811b1d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Samsung Galaxy se reinicia solo - Soluciones Galaxy note 4 se reinicia solo"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Samsung Galaxy se reinicia solo - Soluciones Galaxy Note...</div> <a href="https://innovakon.ru/es/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Samsung Galaxy se reinicia solo - Soluciones Galaxy note 4 se reinicia solo">leer</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/242e09224609f2b7cbd6b5b9f2adc411.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Características clave de Kaspersky Rescue Disk"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Características clave de Kaspersky Rescue Disk</div> <a href="https://innovakon.ru/es/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Características clave de Kaspersky Rescue Disk">leer</a> <div class="clr"> </div> </div> </div> <div class="clr"></div> </div> </div> <div class="sidebar col-lg-3 col-md-4 col-sm-12"> <div class="sidebar-wrp"> <div class="sidebar-wrp-title">últimos artículos</div> <div class="sidebar-wrp-des"> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">MacBook no se conecta a wifi MacBook no ve...</div> <div class="clr"></div> <a href="https://innovakon.ru/es/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Cómo ganar dinero con WebMoney</div> <div class="clr"></div> <a href="https://innovakon.ru/es/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Tableta "Supra": opiniones de clientes</div> <div class="clr"></div> <a href="https://innovakon.ru/es/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Ubicaciones de barcos en tiempo real</div> <div class="clr"></div> <a href="https://innovakon.ru/es/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Los mejores programas para Android Grabar llamadas desde...</div> <div class="clr"></div> <a href="https://innovakon.ru/es/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Eliminar a los no seguidores en Twitter</div> <div class="clr"></div> <a href="https://innovakon.ru/es/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/229610355b0a27a465c73ddb25664556.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Conexión a Internet en una computadora portátil: todo lo posible...</div> <div class="clr"></div> <a href="https://innovakon.ru/es/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">leer</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/5399be52c80b405fedf00779a6136b42.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Samsung Galaxy S IV es el nuevo buque insignia...</div> <div class="clr"></div> <a href="https://innovakon.ru/es/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">leer</a> </div> <div class="clr"></div> </div> </div> <div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget"> </div> </div> <div id="ketena1" style="height:500px;width:260px;" align="center"></div> <div class="clr"></div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="/logo/logo.png" loading=lazy loading=lazy> <div class="footer-contacts-tit">innovakon.ru <br>Teléfonos móviles y comunicaciones.</div> <div class="footer-soc"> <div class="footer-soc-wrp"> <div class="soc_w"> <a href="#" class="soc-link vk" target="_blank"></a> <a href="#" class="soc-link fb" target="_blank"></a> </div> </div> </div> </div> <div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12"> </div> <div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;"> <ul> <li><a href="">Edición del proyecto</a></li> <li><a href="">Publicidad en el sitio web.</a></li> </ul> <ul> <li><a href="https://innovakon.ru/es/feedback.html">Contactos</a></li> <li><a href="https://innovakon.ru/es/sitemap.xml">Mapa del sitio</a></li> </ul> </div> </div> </div> <div class="copyright">© 2024 Teléfonos móviles y comunicaciones.</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script> <a id="scroll-to-top" href="#" title="Vuelve al comienzo">Arriba</a> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} }; /* ]]> */ </script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> <script type="text/javascript">  </script><br> <br> </body> </html>