Bourbon 깔끔한 격자 시스템으로 고정 된 위치 요소를 만드는 방법은 무엇입니까?

Question

깔끔한 그리드 시스템으로 고정 위치 요소를 작동시키는 방법은 무엇입니까? box3은 고정 된 위치를 가진 요소입니다. 따라서 격자가 span-columns(6) 및 shift(3) 인 격자에 맞기 때문에 폭을 지정하지 않았습니다. 따라서 가운데에 배치됩니다. 어쨌든이 일이 일어날 수 있습니까? 어떤 도움을 주시면 감사하겠습니다.

.test { 
    @include outer-container; 
    @include padding(15px); 
    border: 1px solid red; 
.box1 { 
    @include span-columns(6); 
    border: 1px dashed green; 
    height: 100px; 
} 
.box2 { 
    @include span-columns(6); 
    @include omega; 
    border: 1px dashed green; 
height: 100px; 
} 
.box3 { 
    @include span-columns 
    background:red; 
    opacity:.5; 
    @include position(fixed); 
    padding:30px; 
    color:white; 
} 

는

Live code is here

Answer 1

귀하의 라이브 코드는 위의 무엇을 반영하지 않습니다.

그리드를 끊는 고정 된 위치 지정과 관련하여 고정 된 위치 지정은 요소가 아닌 항상 창에 상대적입니다.

수정하려면 ".box3"클래스의 안에 랩핑을 넣고 그 위치를 고정하고 "box3"높이를 지정하십시오.