cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="fixed">
  <ul>
    <li>
      <p>1</p>
      <div class="over">はみだすエリア1</div>
    </li>
    <li>
      <p>2</p>
      <div class="over">はみだすエリア2</div>
    </li>
    <li>
      <p>3</p>
      <div class="over">はみだすエリア3</div>
    </li>
    <li>
      <p>4</p>
      <div class="over">はみだすエリア4</div>
    </li>
    <li>
      <p>5</p>
      <div class="over">はみだすエリア5</div>
    </li>
    <li>
      <p>6</p>
      <div class="over">はみだすエリア6</div>
    </li>
    <li>
      <p>7</p>
      <div class="over">はみだすエリア7</div>
    </li>
    <li>
      <p>8</p>
      <div class="over">はみだすエリア8</div>
    </li>
    <li>
      <p>9</p>
      <div class="over">はみだすエリア9</div>
    </li>
    <li>
      <p>10</p>
      <div class="over">はみだすエリア10</div>
    </li>
    <li>
      <p>11</p>
      <div class="over">はみだすエリア11</div>
    </li>
    <li>
      <p>12</p>
      <div class="over">はみだすエリア12</div>
    </li>
    <li>
      <p>13</p>
      <div class="over">はみだすエリア13</div>
    </li>
    <li>
      <p>14</p>
      <div class="over">はみだすエリア14</div>
    </li>
    <li>
      <p>15</p>
      <div class="over">はみだすエリア15</div>
    </li>
    <li>
      <p>16</p>
      <div class="over">はみだすエリア16</div>
    </li>
    <li>
      <p>17</p>
      <div class="over">はみだすエリア17</div>
    </li>
    <li>
      <p>18</p>
      <div class="over">はみだすエリア18</div>
    </li>
    <li>
      <p>19</p>
      <div class="over">はみだすエリア19</div>
    </li>
    <li>
      <p>20</p>
      <div class="over">はみだすエリア20</div>
    </li>
    <li>
      <p>21</p>
      <div class="over">はみだすエリア21</div>
    </li>
    <li>
      <p>22</p>
      <div class="over">はみだすエリア22</div>
    </li>
    <li>
      <p>23</p>
      <div class="over">はみだすエリア23</div>
    </li>
    <li>
      <p>24</p>
      <div class="over">はみだすエリア24</div>
    </li>
    <li>
      <p>25</p>
      <div class="over">はみだすエリア25</div>
    </li>
    <li>
      <p>26</p>
      <div class="over">はみだすエリア26</div>
    </li>
    <li>
      <p>27</p>
      <div class="over">はみだすエリア27</div>
    </li>
    <li>
      <p>28</p>
      <div class="over">はみだすエリア28</div>
    </li>
    <li>
      <p>29</p>
      <div class="over">はみだすエリア29</div>
    </li>
    <li>
      <p>30</p>
      <div class="over">はみだすエリア30</div>
    </li>
    <li>
      <p>31</p>
      <div class="over">はみだすエリア31</div>
    </li>
    <li>
      <p>32</p>
      <div class="over">はみだすエリア32</div>
    </li>
    <li>
      <p>33</p>
      <div class="over">はみだすエリア33</div>
    </li>
    <li>
      <p>34</p>
      <div class="over">はみだすエリア34</div>
    </li>
    <li>
      <p>35</p>
      <div class="over">はみだすエリア35</div>
    </li>
    <li>
      <p>36</p>
      <div class="over">はみだすエリア36</div>
    </li>
    <li>
      <p>37</p>
      <div class="over">はみだすエリア37</div>
    </li>
    <li>
      <p>38</p>
      <div class="over">はみだすエリア38</div>
    </li>
    <li>
      <p>39</p>
      <div class="over">はみだすエリア39</div>
    </li>
    <li>
      <p>40</p>
      <div class="over">はみだすエリア40</div>
    </li>
    <li>
      <p>41</p>
      <div class="over">はみだすエリア41</div>
    </li>
    <li>
      <p>42</p>
      <div class="over">はみだすエリア42</div>
    </li>
    <li>
      <p>43</p>
      <div class="over">はみだすエリア43</div>
    </li>
    <li>
      <p>44</p>
      <div class="over">はみだすエリア44</div>
    </li>
    <li>
      <p>45</p>
      <div class="over">はみだすエリア45</div>
    </li>
    <li>
      <p>46</p>
      <div class="over">はみだすエリア46</div>
    </li>
    <li>
      <p>47</p>
      <div class="over">はみだすエリア47</div>
    </li>
    <li>
      <p>48</p>
      <div class="over">はみだすエリア48</div>
    </li>
    <li>
      <p>49</p>
      <div class="over">はみだすエリア49</div>
    </li>
    <li>
      <p>50</p>
      <div class="over">はみだすエリア50</div>
    </li>
    <li>
      <p>51</p>
      <div class="over">はみだすエリア51</div>
    </li>
    <li>
      <p>52</p>
      <div class="over">はみだすエリア52</div>
    </li>
    <li>
      <p>53</p>
      <div class="over">はみだすエリア53</div>
    </li>
    <li>
      <p>54</p>
      <div class="over">はみだすエリア54</div>
    </li>
    <li>
      <p>55</p>
      <div class="over">はみだすエリア55</div>
    </li>
    <li>
      <p>56</p>
      <div class="over">はみだすエリア56</div>
    </li>
    <li>
      <p>57</p>
      <div class="over">はみだすエリア57</div>
    </li>
    <li>
      <p>58</p>
      <div class="over">はみだすエリア58</div>
    </li>
    <li>
      <p>59</p>
      <div class="over">はみだすエリア59</div>
    </li>
    <li>
      <p>60</p>
      <div class="over">はみだすエリア60</div>
    </li>
    <li>
      <p>61</p>
      <div class="over">はみだすエリア61</div>
    </li>
    <li>
      <p>62</p>
      <div class="over">はみだすエリア62</div>
    </li>
    <li>
      <p>63</p>
      <div class="over">はみだすエリア63</div>
    </li>
    <li>
      <p>64</p>
      <div class="over">はみだすエリア64</div>
    </li>
    <li>
      <p>65</p>
      <div class="over">はみだすエリア65</div>
    </li>
    <li>
      <p>66</p>
      <div class="over">はみだすエリア66</div>
    </li>
    <li>
      <p>67</p>
      <div class="over">はみだすエリア67</div>
    </li>
    <li>
      <p>68</p>
      <div class="over">はみだすエリア68</div>
    </li>
    <li>
      <p>69</p>
      <div class="over">はみだすエリア69</div>
    </li>
    <li>
      <p>70</p>
      <div class="over">はみだすエリア70</div>
    </li>
    <li>
      <p>71</p>
      <div class="over">はみだすエリア71</div>
    </li>
    <li>
      <p>72</p>
      <div class="over">はみだすエリア72</div>
    </li>
    <li>
      <p>73</p>
      <div class="over">はみだすエリア73</div>
    </li>
    <li>
      <p>74</p>
      <div class="over">はみだすエリア74</div>
    </li>
    <li>
      <p>75</p>
      <div class="over">はみだすエリア75</div>
    </li>
    <li>
      <p>76</p>
      <div class="over">はみだすエリア76</div>
    </li>
    <li>
      <p>77</p>
      <div class="over">はみだすエリア77</div>
    </li>
    <li>
      <p>78</p>
      <div class="over">はみだすエリア78</div>
    </li>
    <li>
      <p>79</p>
      <div class="over">はみだすエリア79</div>
    </li>
    <li>
      <p>80</p>
      <div class="over">はみだすエリア80</div>
    </li>
    <li>
      <p>81</p>
      <div class="over">はみだすエリア81</div>
    </li>
    <li>
      <p>82</p>
      <div class="over">はみだすエリア82</div>
    </li>
    <li>
      <p>83</p>
      <div class="over">はみだすエリア83</div>
    </li>
    <li>
      <p>84</p>
      <div class="over">はみだすエリア84</div>
    </li>
    <li>
      <p>85</p>
      <div class="over">はみだすエリア85</div>
    </li>
    <li>
      <p>86</p>
      <div class="over">はみだすエリア86</div>
    </li>
    <li>
      <p>87</p>
      <div class="over">はみだすエリア87</div>
    </li>
    <li>
      <p>88</p>
      <div class="over">はみだすエリア88</div>
    </li>
    <li>
      <p>89</p>
      <div class="over">はみだすエリア89</div>
    </li>
    <li>
      <p>90</p>
      <div class="over">はみだすエリア90</div>
    </li>
    <li>
      <p>91</p>
      <div class="over">はみだすエリア91</div>
    </li>
    <li>
      <p>92</p>
      <div class="over">はみだすエリア92</div>
    </li>
    <li>
      <p>93</p>
      <div class="over">はみだすエリア93</div>
    </li>
    <li>
      <p>94</p>
      <div class="over">はみだすエリア94</div>
    </li>
    <li>
      <p>95</p>
      <div class="over">はみだすエリア95</div>
    </li>
    <li>
      <p>96</p>
      <div class="over">はみだすエリア96</div>
    </li>
    <li>
      <p>97</p>
      <div class="over">はみだすエリア97</div>
    </li>
    <li>
      <p>98</p>
      <div class="over">はみだすエリア98</div>
    </li>
    <li>
      <p>99</p>
      <div class="over">はみだすエリア99</div>
    </li>
    <li>
      <p>100</p>
      <div class="over">はみだすエリア100</div>
    </li>
  </ul>
</div>
            
          
!
            
              #fixed {
  width: 200px;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #eee;
}

#fixed ul {
  width: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-x: visible;
  overflow-y: scroll;
}

#fixed li {
  padding: 1em;
  text-align: center;
}

#fixed li:nth-child(odd) {
  background: #ddd;
}

#fixed li:hover {
  background: yellow;
}

#fixed .over {
  width: 160px;
  padding: 1em;
  text-align: center;
  background: #aaa;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 200px;
  display: none;
}

#fixed li:hover .over {
  display: block;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console