Kevin Powell - Community•3w ago

fix before and fix positioning

I want a fix position and a before/after tho the fixed posiotion need to be above the after and before? i search and it said i couldnt and i had to go for the changing the some css in before and parent but i dont really want it! so is there anything else both are fixed tho the before can be anything but i want it before the damn parent

14 Replies

MarkBoots•3w ago

If I understand your question correctly, you can do it with grid.

.fixed {
  display: grid;
  &::before, &::after { content: "" }
  &::before {
    grid-row: 1;
  }
  &::after {
    grid-row: 2;
  }
  /* that will leave the contents of the element in grid-row 3 /*
}

.fixed {
  display: grid;
  &::before, &::after { content: "" }
  &::before {
    grid-row: 1;
  }
  &::after {
    grid-row: 2;
  }
  /* that will leave the contents of the element in grid-row 3 /*
}

R.I.POP•3w ago

position : fixed i meant not the class still tnx for being nice

MarkBoots•3w ago

i know, it's just as example

R.I.POP•3w ago

but i dont want a grid either

MarkBoots•3w ago

R.I.POP•3w ago

assume i wanna put the before behind the main one with a bit bigger backscreen so it shows it self like a border tho it will appear forward since the parent is a fix not relative for better seeing it go and make the red on inset 0 and the green and blue smaller with position fixed / absoloute now try to push them behind the main/red

MarkBoots•3w ago

please show a drawing of what you want to acchieve + the mark up. It's not really clear to me

R.I.POP•3w ago

ok wait i can make it div{
position: fixed; overflow-y: scroll; background: blue; inset: 10%;} div::after{ content:''; any position any condition background:black; i want it as a border so = inset: 15%; } just make the black one go behind simplest form

MarkBoots•3w ago

but the blue will cover the black if it goes behind. what's the purpose? Can you mock up a design, there might be an easier way to what you want. I bit more context pls

R.I.POP•3w ago

.test-conic{
        width: 200px ;
        aspect-ratio: 1/1 ;
        position: relative ;
        background-color: black;
        border: red solid 3px;
        inset: 15px;
      }

.test-conic{
        width: 200px ;
        aspect-ratio: 1/1 ;
        position: relative ;
        background-color: black;
        border: red solid 3px;
        inset: 15px;
      }

.test-conic::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: conic-gradient(
          from 280deg at 50% 50%,
          purple 10deg,
          transparent 10deg
        );
        inset: -8px;
        padding: 8px;
        z-index: -5;
      }

.test-conic::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: conic-gradient(
          from 280deg at 50% 50%,
          purple 10deg,
          transparent 10deg
        );
        inset: -8px;
        padding: 8px;
        z-index: -5;
      }

now try to put the fix in the first position (main one) now try to push it backwars

MarkBoots•3w ago

yea, that wont work. but there might be other options for example, a single element without pseudo

.test-conic{
  position: fixed;
  inset: 10%;
  border: 8px solid transparent; /* for the conic) */
  outline: 3px solid red;
  outline-offset: -8px;
  background: 
    linear-gradient(black 0 0) padding-box, /* black background */
    conic-gradient(from 280deg, purple 10deg, transparent 0) border-box; /*purple conic*/
}

.test-conic{
  position: fixed;
  inset: 10%;
  border: 8px solid transparent; /* for the conic) */
  outline: 3px solid red;
  outline-offset: -8px;
  background: 
    linear-gradient(black 0 0) padding-box, /* black background */
    conic-gradient(from 280deg, purple 10deg, transparent 0) border-box; /*purple conic*/
}

https://codepen.io/MarkBoots/pen/RwXJayZ

R.I.POP•3w ago

yea dont want this need both and it is urgent to both be there perferably the same order cause im trying the suggested on stackoverflow and I encounter a problem with scroll so yea mine is not a good idea

R.I.POP•3w ago

well it isnt after the pink is after and the behind is the parent

Gaming

Programming

fix before and fix positioning