div with absolute position does not respect the relative position of its container

Question

div with absolute position does not respect the relative position of its container

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a problem to design the Section tabs in the Home of a Web that I am developing.

Even though I have established the container with relative position, the boxes with absolute position continue taking as reference the width and height of the page itself, but not the one of its container.

Capture step and fragment of the code. Sure, it's silly, but I can not find the solution.

- CODE-- / I have tried to leave as a relative position only the container of the boxes that are positioned absolute, and also (as the following code shows) leaving the parent containers as relative, but with no result. /

The following is the code of the .CSS file

/*SECTION*/

/*Este bloque es el contenedor del propio section de la página (a section no le he definido ningún estilo css)*/

.contenedorSection{

    width: 90%; height: 880px;
    position: relative;

    margin-left: auto; margin-right: auto;

    border: 2px solid black;
}

/*Este bloque es el contenedor de los div que sirven como pestañas del Section*/
.contPestanasSect{

    width: 100%; height: 880px;
    **position: relative;**
}

/*Esta clase define a las pestañas del section, que son también div que continen etiqueta p*/

.pestSect{

    width: 200px; height: 100px;
    **position: absolute;**

    /*define la posicion del texto*/
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;

    /*define el borde*/
    border: 2px solid #1CD7DF;

}

/*los id que determinan la posición de cada pestaña dentro del section (en el caso de #a lo he dejado al 100% para que se vea claramente que sobrepasa el borde de su contenedor*/

#a{

    top: 40%; left: 100%;
}

#b{

    top: 60%; left: 65%;
}

#c{

    top: 40%; left: 45%;
}

#d{

    width: 240px;
    top: 60%; left: 25%;
}

#e{

    top: 40%; left: 5%;
}

Next I pass the structure of the HTML file

<!--BLOQUE SECTION-->

        <div class="contenedorSection">

              <section>

                  <div class="contPestanasSect">
                      <div class="pestSect" id="a"><p class="fuenteSection">ANALISIS</p></div>
                      <div class="pestSect" id="b"><p class="fuenteSection">NONSTOP</p></div>  
                      <div class="pestSect" id="c"><p class="fuenteSection">PAJAS MENTALES</p></div>
                      <div class="pestSect" id="d"><p class="fuenteSection">MISCELANEAS</p></div>
                      <div class="pestSect" id="e"><p class="fuenteSection">CANDY-SHOP</p></div> 
                  </div>

              </section>
        </div>

I hope you can help me. A greeting.

html5 css

asked by Pepin S 02.09.2018 в 23:07

source

2 answers

0

your code is not wrong, to get what you want you have to pay attention to the measures you put on the class div "pestSect"

#a{

    top: 40%; left: 100%;  //le sumas 35% , aca tendrias que poner 85% y funciona
}

#b{

    top: 60%; left: 65%;   //le sumas 20%
}

#c{

    top: 40%; left: 45%;  // le sumas 20%
}

#d{

    width: 240px;
    top: 60%; left: 25%; // le sumas 20%
}

#e{

    top: 40%; left: 5%; //empezas con 5%
}

Trying to put a left of 0% to the e, it looks like the absolute respects the relative of the container, modifies the left of the id "a" and puts it in 85% and you get what you're looking for ☺ I hope it helps.

answered by 03.09.2018 в 11:11

unfulfilled dependencies: php7.2-zip: It depends: libzip4 (= 1.0) NoMethodError: undefined method 'users' - Ruby on Rails

score 0 · Accepted Answer

I congratulate you for trying to solve it by yourself. I found the reason for your problem:

When you apply left: 100% you make the elemeto have a space to the left of 100%, which, of course, causes an overflow.

To achieve the result you expect, you can use flexbox ( link )

I edited some things from your css and it's like this:

/*SECTION*/


/*HACE QUE EL TEXTO NO SE SALGA DE SU CONTENEDOR*/
p{
  word-break: break-all;
  hyphens: auto;
  text-align:center;
-ms-word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
word-break: break-word;
} */


.contenedorSection{

    width: 90%; height: 880px;
    position: relative;

    margin-left: auto; margin-right: auto;

    border: 2px solid black;
}

/*Este bloque es el contenedor de los div que sirven como pestañas del Section*/
.contPestanasSect{

    width: 100%; height: 880px;
    position: relative;
  display:flex;
  justify-content:space-around;
  flex-wrap: nowrap;
/*   overflow:hidden; */
}

/*Esta clase define a las pestañas del section, que son también div que continen etiqueta p*/

.pestSect{

    width: 15%;
  height: 100px;


    /*define la posicion del texto*/
    display: flex;
    justify-content: center;
    flex-direction: column;

    /*define el borde*/
    border: 2px solid #1CD7DF;

}

/*los id que determinan la posición de cada pestaña dentro del section (en el caso de #a lo he dejado al 100% para que se vea claramente que sobrepasa el borde de su contenedor*/

#a{


  margin-top:50%;
}

#b{


}

#c{

  margin-top:50%;
}

#d{



}

#e{

    margin-top:50%;
}

I hope I helped you. Do not forget to mark the answer that best helps you as valid to help other people with your same problem in the future. Good luck!