Todo el cuadro de Sensores esta encapsulado, este le permite posicionarse del lado derecho. Me gustaria que este al entrar la pagina este a la altura de UPS EATON y se quede estatico a partir de ese momento hasta el final de la pagina.
Espero haberme explicado
todo en la parte de abajo esta diseñado para permitir este deslizamiento de sensores y que no obstruya
Conocen algun solucion para mi problema?
les dejo un poco del html y del css de la secciones de sensores, gracias!
/* Estilos para el límite de desplazamiento */
.side-limits {
position: fixed;
top: 165px;
right: 20px;
width: 200px;
height: 300px;
}
/* Estilos para el cuadro estático */
.side-static {
position: fixed;
top: 10px;
right: 200px;
width: 100px;
height: 100px;
background-color: #f00;
margin-right: 10px;
/* margin-top: 80px; */
}
.side-container {
background-color: white;
display: flex;
justify-content: left;
align-items: left;
flex-direction: column;
height: 100vh;
padding: 0;
margin: 0;
margin-bottom: -250px;
/* ESTE ES EL MAIN-CONTAINER
Estilos para el contenedor principal, si es necesario */
}
.side-tittle {
margin: 0;
/* Estilos para el título del cuadro, si es necesario */
}
.side-custom {
background-color: #e0e0e0; /* Color de fondo más oscuro del contenedor */
border-radius: 10px; /* Esquinas redondeadas */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra para resaltar el contenedor */
max-width: 1400px; /* Anchura máxima del contenedor */
margin-top: 10px; /* Añadir un margen superior para separar del h2 */
width: 300px;
height: 495px;
display: flex;
align-items: flex-start;
flex-direction: column;
/* ESTE ES EL CISTOM-CONTAINER
Estilos para el contenedor personalizado, si es necesario */
}
.side-items {
display: flex;
flex-direction: row;
height: 100%;
/* CONTAINER-ITEMS
Estilos para los ítems dentro del contenedor, si es necesario */
}
.side-box {
background-color: #d0d0d0; /* Color de fondo de los rectángulos internos */
flex: 1;
height: px;
width: 290px;
border-radius: 10px; /* Esquinas redondeadas */
margin: 5px;
/*
INNER-BOX
Estilos para el cuadro dentro del contenedor, si es necesario */
}
<div class="side-limits" id="side-limits">
<div class="side-static">
<div class="side-container">
<h2>Sensores</h2>
<div class="side-custom">
<div class="side-tittle">
<h3>Agua Piso</h3>
</div>
<div class="side-items">
<div class="side-box">
<p>cargando...</p>
</div>
</div>
<div class="side-tittle">
<h3>Temperatura</h3>
</div>
<div class="side-items">
<div class="side-box">
<p>cargando...</p>
</div>
</div>
<div class="side-tittle">
<h3>Humo</h3>
</div>
<div class="side-items">
<div class="side-box">
<p>cargando...</p>
</div>
</div>
<div class="side-tittle">
<h3>Seguridad</h3>
</div>
<div class="side-items">
<div class="side-box">
<p>cargando...</p>
</div>
</div>
</div>
</div>
</div>
</div>
es importante mencionar que los valores de la funcion top en .side-static, al darle valor a top es el espacio total sobre el limite superior de la pagina, si este aumento SI se desplaza hacia abajo pero se oculta de manera fija y no se visualiza toda la informacion completa
Gracias!!!