2

En teoría el outline es una banda alrededor de un CSS box que no ocupa espacio y si no me equivoco queda por encima de la página ocultando lo que haya debajo. Por ejemplo:

<style>
.container{
    display: table;
    border-spacing: 2px;
}
.box{
    display: table-cell;
    width: 200px
}
.outline:hover{
    outline: 40px solid rgb(0, 195, 255, 0.5);
outline-offset: 4px;
}    .content {
background-color: lightgray;
padding: 4px;
}
</style>
<div class="container"> 
    <div class="box">
            <div class="content"> ctw-boxizquierda </div>
    </div>
    <div class="box outline">
            <div class="content ">  Pasa el ratón</div>
    </div>
    <div class="box">
            <div class="content"> ctw-boxderecha </div>
    </div>
</div>

Al pasar el ratón por la celda central se ve un outline cubriendo parte de las celdas laterales.

Pero si usamos flex:

<style>
.container{
    display: flex;
    border-spacing: 2px;
}

.box{
    margin: 2px 2px;
    width: 200px
}
.outline:hover{
    outline: 40px solid rgb(0, 195, 255, 0.5);
outline-offset: 4px;
}
.content {
   background-color: lightgray;
   padding: 4px;
}
</style>
<div class="container"> 
    <div class="box">
            <div class="content"> ctw-boxizquierda </div>
    </div>
    <div class="box outline">
            <div class="content ">  Pasa el ratón</div>
    </div>
    <div class="box">
            <div class="content"> ctw-boxderecha </div>
    </div>
</div>

Ahora al pasar el ratón por la celda central el outline cubre la celda izquierda pero queda por debajo de la derecha.

Igual ocurre si las box se ponen con display inline-block (sin flex en el container).

¿Alguien sabe porqué ocurre esto?

No le veo sentido, parece un error de implementación, o estoy interpretando mal el comportamiento de outline

1 respuesta 1

0

La descripción en la documentación de outline no dice que este quede por encima de nada en particular. La descripción es bastante escueta:

Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way.

Supongo que esto deja a cada navegador en la libertad de implementarlo a su manera.

Para corregir la situación, si lo queres ver por delante de otros elementos, puedes valerte del z-index, con un valor tan alto que haga que siempre aparezca por delante de otros elementos, por ejemplo:

.container {
  display: flex;
  border-spacing: 2px;
  margin-top: 50px;
}
.box {
  margin: 2px 2px;
  width: 200px
}
.outline:hover {
  outline: 40px solid rgb(0, 195, 255, 0.5);
  outline-offset: 4px;
  z-index: 3000;
}
.content {
  background-color: lightgray;
  padding: 4px;
}
<div class="container"> 
  <div class="box">
    <div class="content"> ctw-boxizquierda </div>
  </div>
  <div class="box outline">
    <div class="content ">  Pasa el ratón</div>
  </div>
  <div class="box">
    <div class="content"> ctw-boxderecha </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.