how to make an element relative to the top of the page or another specified element

user_14089832 0
Viewed 25

I am trying to make the size column in this next to the color column. The problem is that I can only edit the CSS, and I am using the Woocomerce plugin for WordPress. I only want the two columns to be next to each other, but with absolute or relative position + some adjustments, they work for one product, but not for the others. That is because the color column is not always the same length, which changes the starting position of the size column.

Image of the website

This is what I managed to do. (the code that affects the position starts after /***/

/*this one involves the whole banner with the logo and the phone numbers (but it is ignored by the children for aesthetic purposes)*/
#masthead {
    background-color: rgba(140,210,190, 0.2);
    height: 210px;
}
/*this one is the logo AeryUniforms*/
.custom-logo-link {
}
/*this one is for the bar with the contact and the address*/
.right-head{
    border-radius: 5px;
    background-color: rgba(250,250,250, 10.0) !important;
    
}
/*this one is the menu with the home button*/
#main-nav {
    background: #323a45;
    
}
/*these two are for the arrows in the carrousel*/
.fa-angle-left{
    position:relative;
    top: -30px;
    right: 4px;
}
.fa-angle-right{
    position:relative;
    top: -10px;
    right: 2px;
}

/*this one handles the width of the color, size, and height drop and buttons*/
.variation-selector,
.variation-select-color,
.swatch-item-wrapper{
    width: 50%;
}
/***/
/*adjust the position of the label for the color*/
label[for="pa_color"]{
    position:relative;
    top: -23px;
    right: -52px;
}
/*adjust the position of the button for the size*/
div[data-attribute_name~="attribute_pa_size"]{
    float:right;
    position:relative;
    top: -377px;
    right: 86px;
}
/*adjust the position of the drop-item menu for the size*/
select[id="pa_size"]{
    position:relative;
    top: -377px;
    right: -140px;
}

/*adjust the position of the label for the size*/
label[for="pa_size"]{
    position:relative;
    top: -400px;
    right: -190px;
}

I was looking for a way to make the tr element for the size aligned with the one of color, like a position x + 3px from element 1. My last resort was to do the position relative to the top right corner of the page, but I wasn't sure how, or if the elements would move as I scroll through the page.

woocommerce wordpress css
1 Answers

So it is hard to suggest a solid solution without knowing the HTML. CSS only gets us part of the way there. What I would do if at all possible based on the structure is if each option is contained in its own box and the 3 boxes are in one parent. I would display: flex that parent which will put them all side by side. Then adjust as needed from there. If you could add the html just for those 3 boxes and that section it would help.

user_34114260
Related