Home>

⚫︎
I am using Bootstrap to copy the site, but the red circles are blank and they do not overlap.
The second photo is a sample. Sorry for your inconvenience, but please teach.

⚫︎ The problem i am experiencing

sample

⚫︎ Tried
I tried various things such as relative for the parent element, absolute for the child element, and adjustment of z-index, but it did not work.
I also referred to the following article, but I could not solve it.
https://coliss.com/articles/build-websites/operation/css/4-reasons-z-index-isnt-working.html

⚫︎ Supplementary information (FW/tool ​​version, etc.)
The site display is Chrome and VScode is used for coding.
It is MacOS.

⚫︎ Applicable source code
HTML

<!-- Features of Xeory Extension ------------------------------ -->
        
            
                
                  <i></i>
                
            
                Features of Xeory Extension
            
          <p>feature</p>
            
              <span></span>
            
        
      <!-- Features of Xeory Extension ------------------------------ -->
        
            
                1
                Mobile Responsive
              <p>Mobile Responsive</p>
              <p>
                    Xeory
                    Extension has a responsive design. The display is optimized for various devices such as smartphones and tablets.
              </p>
                
                     See details
                
            
            
                
            
        
  

CSS

/*<!-- Features of Xeory Extension ------------------------------ -->*/
.feature {
    position: relative;
}
.flex {
    background: #3b4552;
}
.fa-check {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    color: #fff;
}
.flex p {
    font-size: 13px;
}
.f-border {
    position: absolute;
    bottom: -18px;
    width: 100%;
    z-index: 10;
    margin: 0;
}
.f-border span {
    display: block;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: 56px solid transparent;
    border-right: 56px solid transparent;
    border-top: 18px solid #3b4552;
}
/*<!-- Xeory Extension Features Content ------------------------------ -->*/
.d-flex {
    position: absolute;
    left: 0;
    top: 125;
    z-index: 20;
}
.f-number {
    width: 34px;
    height: 73px;
    font-size: 16px;
    vertical-align: bottom;
    color: #fff;
    background: #47b39d;
    padding: 40px 12px 8px 12px;
}
.mobile,
.m-english {
    color: #47b39d;
}
.m-english {
    font-size: 10px;
}
.col-md-7 p {
    font-size: 17px;
}
.btn-simple {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 40px;
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    transition: all ease-in-out 0.3s;
    background: #ff6c00;
    border-radius: 5px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.btn-simple:hover {
    opacity: 0.8;
}
.col-md-4 img {
    max-width: 100%;
    max-height: 100%;
  • Answer # 1

    z-index Since it is the front and back positional relationship, it does not matter with the top and bottom margins.

    Due to "margin offset", p's default browser margin is outside the parent element.

    It's a good idea to remove the default margin as shown below.

    .flex p {
        font-size: 13px;
        margin-bottom: 0;
        padding-bottom: 1rem;/* Add if default margins are needed */
    }

    Alternatively, it is common to reset all default settings with a reset CSS.

  • Answer # 2

    It seems that p of feature has margin.
    You can check it using the developer tool by right-clicking → verifying the element.